Browse Source
* add re-upload feature for resource files * add re-upload feature for udf files Co-authored-by: sheldonliu <sheldonliu>3.2.0-release
Sheldon
2 years ago
committed by
GitHub
40 changed files with 1006 additions and 1847 deletions
@ -0,0 +1,138 @@
|
||||
/* |
||||
* 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, getCurrentInstance, toRefs } from 'vue' |
||||
import { useRouter } from 'vue-router' |
||||
import { NForm, NFormItem, NInput, NSelect, NButton } from 'naive-ui' |
||||
import { useI18n } from 'vue-i18n' |
||||
|
||||
import Card from '@/components/card' |
||||
import MonacoEditor from '@/components/monaco-editor' |
||||
import { useCreate } from './use-create' |
||||
import { useForm } from './use-form' |
||||
import { fileTypeArr } from '@/common/common' |
||||
|
||||
import styles from '../index.module.scss' |
||||
|
||||
import type { Router } from 'vue-router' |
||||
|
||||
export default defineComponent({ |
||||
name: 'ResourceCreate', |
||||
setup() { |
||||
const router: Router = useRouter() |
||||
|
||||
const { state } = useForm() |
||||
const { handleCreateFile } = useCreate(state) |
||||
|
||||
const fileSuffixOptions = fileTypeArr.map((suffix) => ({ |
||||
key: suffix, |
||||
label: suffix, |
||||
value: suffix |
||||
})) |
||||
|
||||
const handleFile = () => { |
||||
handleCreateFile() |
||||
} |
||||
|
||||
const handleReturn = () => { |
||||
router.go(-1) |
||||
} |
||||
|
||||
const trim = getCurrentInstance()?.appContext.config.globalProperties.trim |
||||
|
||||
return { |
||||
fileSuffixOptions, |
||||
handleFile, |
||||
handleReturn, |
||||
...toRefs(state), |
||||
trim |
||||
} |
||||
}, |
||||
render() { |
||||
const { t } = useI18n() |
||||
return ( |
||||
<Card title={t('resource.file.file_details')}> |
||||
<NForm |
||||
rules={this.rules} |
||||
ref='fileFormRef' |
||||
class={styles['form-content']} |
||||
> |
||||
<NFormItem label={t('resource.file.file_name')} path='fileName'> |
||||
<NInput |
||||
allowInput={this.trim} |
||||
v-model={[this.fileForm.fileName, 'value']} |
||||
placeholder={t('resource.file.enter_name_tips')} |
||||
style={{ width: '300px' }} |
||||
class='input-file-name' |
||||
/> |
||||
</NFormItem> |
||||
<NFormItem label={t('resource.file.file_format')} path='suffix'> |
||||
<NSelect |
||||
defaultValue={[this.fileForm.suffix]} |
||||
v-model={[this.fileForm.suffix, 'value']} |
||||
options={this.fileSuffixOptions} |
||||
style={{ width: '100px' }} |
||||
class='select-file-format' |
||||
/> |
||||
</NFormItem> |
||||
<NFormItem label={t('resource.file.description')} path='description'> |
||||
<NInput |
||||
allowInput={this.trim} |
||||
type='textarea' |
||||
v-model={[this.fileForm.description, 'value']} |
||||
placeholder={t('resource.file.enter_description_tips')} |
||||
style={{ width: '430px' }} |
||||
class='input-description' |
||||
/> |
||||
</NFormItem> |
||||
<NFormItem label={t('resource.file.file_content')} path='content'> |
||||
<div |
||||
style={{ |
||||
width: '90%' |
||||
}} |
||||
> |
||||
<MonacoEditor v-model={[this.fileForm.content, 'value']} /> |
||||
</div> |
||||
</NFormItem> |
||||
<div class={styles['file-edit-content']}> |
||||
<div class={styles.submit}> |
||||
<NButton |
||||
type='info' |
||||
size='small' |
||||
round |
||||
onClick={this.handleFile} |
||||
class='btn-submit' |
||||
> |
||||
{t('resource.file.save')} |
||||
</NButton> |
||||
<NButton |
||||
type='info' |
||||
size='small' |
||||
text |
||||
style={{ marginLeft: '15px' }} |
||||
onClick={this.handleReturn} |
||||
class='btn-cancel' |
||||
> |
||||
{t('resource.file.return')} |
||||
</NButton> |
||||
</div> |
||||
</div> |
||||
</NForm> |
||||
</Card> |
||||
) |
||||
} |
||||
}) |
||||
@ -0,0 +1,132 @@
|
||||
/* |
||||
* 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 { useRoute, useRouter } from 'vue-router' |
||||
import { defineComponent, toRefs, watch } from 'vue' |
||||
import { NButton, NForm, NFormItem, NSpace, NSpin } from 'naive-ui' |
||||
import { useI18n } from 'vue-i18n' |
||||
import { useForm } from './use-form' |
||||
import { useEdit } from './use-edit' |
||||
import Card from '@/components/card' |
||||
import MonacoEditor from '@/components/monaco-editor' |
||||
import styles from '../index.module.scss' |
||||
|
||||
export default defineComponent({ |
||||
name: 'ResourceEdit', |
||||
setup() { |
||||
const route = useRoute() |
||||
const router = useRouter() |
||||
|
||||
const componentName = route.name |
||||
// fullname is now the id of resources
|
||||
const fullName = String(router.currentRoute.value.query.prefix || "") |
||||
const tenantCode = String(router.currentRoute.value.query.tenantCode || "") |
||||
|
||||
const { state } = useForm() |
||||
const { getResourceView, handleUpdateContent } = useEdit(state) |
||||
|
||||
const handleFileContent = () => { |
||||
state.fileForm.content = resourceViewRef.state.value.content |
||||
handleUpdateContent(fullName, tenantCode) |
||||
} |
||||
|
||||
const handleReturn = () => { |
||||
router.go(-1) |
||||
} |
||||
|
||||
const resourceViewRef = getResourceView(fullName, tenantCode) |
||||
watch( |
||||
() => resourceViewRef.state.value.content, |
||||
() => (state.fileForm.content = resourceViewRef.state.value.content) |
||||
) |
||||
|
||||
return { |
||||
componentName, |
||||
resourceViewRef, |
||||
handleReturn, |
||||
handleFileContent, |
||||
...toRefs(state) |
||||
} |
||||
}, |
||||
render() { |
||||
const { t } = useI18n() |
||||
return ( |
||||
<Card title={t('resource.file.file_details')}> |
||||
{this.resourceViewRef.isReady.value ? ( |
||||
<div class={styles['file-edit-content']}> |
||||
<h2> |
||||
<span>{this.resourceViewRef.state.value.alias}</span> |
||||
</h2> |
||||
<NForm |
||||
rules={this.rules} |
||||
ref='fileFormRef' |
||||
class={styles['form-content']} |
||||
disabled={this.componentName !== 'resource-file-edit'} |
||||
> |
||||
<NFormItem path='content'> |
||||
<MonacoEditor |
||||
v-model={[this.resourceViewRef.state.value.content, 'value']} |
||||
/> |
||||
</NFormItem> |
||||
<NSpace> |
||||
<NButton |
||||
type='info' |
||||
size='small' |
||||
text |
||||
style={{ marginRight: '15px' }} |
||||
onClick={this.handleReturn} |
||||
class='btn-cancel' |
||||
> |
||||
{t('resource.file.return')} |
||||
</NButton> |
||||
{this.componentName === 'resource-file-edit' && ( |
||||
<NButton |
||||
type='info' |
||||
size='small' |
||||
round |
||||
onClick={() => this.handleFileContent()} |
||||
class='btn-submit' |
||||
> |
||||
{t('resource.file.save')} |
||||
</NButton> |
||||
)} |
||||
</NSpace> |
||||
</NForm> |
||||
</div> |
||||
) : ( |
||||
<NSpace justify='center'> |
||||
<NSpace vertical> |
||||
<NSpin show={true} /> |
||||
<NSpace> |
||||
<NButton |
||||
type='info' |
||||
size='small' |
||||
text |
||||
style={{ marginRight: '15px' }} |
||||
onClick={this.handleReturn} |
||||
class='btn-cancel' |
||||
> |
||||
{t('resource.file.return')} |
||||
</NButton> |
||||
</NSpace> |
||||
</NSpace> |
||||
</NSpace> |
||||
)} |
||||
</Card> |
||||
) |
||||
} |
||||
}) |
||||
@ -0,0 +1,274 @@
|
||||
/* |
||||
* 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 { useRouter } from 'vue-router' |
||||
import { |
||||
defineComponent, |
||||
onMounted, |
||||
ref, |
||||
getCurrentInstance, |
||||
PropType, |
||||
toRefs |
||||
} from 'vue' |
||||
import { |
||||
NIcon, |
||||
NSpace, |
||||
NDataTable, |
||||
NButtonGroup, |
||||
NButton, |
||||
NPagination, |
||||
NBreadcrumb, |
||||
NBreadcrumbItem |
||||
} from 'naive-ui' |
||||
import { useI18n } from 'vue-i18n' |
||||
import { SearchOutlined } from '@vicons/antd' |
||||
import { useTable } from './table/use-table' |
||||
import { useFileStore } from '@/store/file/file' |
||||
import Card from '@/components/card' |
||||
import ResourceFolderModal from './folder' |
||||
import ResourceUploadModal from './upload' |
||||
import ResourceRenameModal from './rename' |
||||
import styles from './index.module.scss' |
||||
import type { Router } from 'vue-router' |
||||
import Search from "@/components/input-search" |
||||
import { ResourceType } from "@/views/resource/components/resource/types"; |
||||
|
||||
|
||||
const props = { |
||||
resourceType: { |
||||
type: String as PropType<ResourceType>, |
||||
default: undefined |
||||
} |
||||
} |
||||
|
||||
export default defineComponent({ |
||||
name: 'ResourceList', |
||||
props, |
||||
setup(props) { |
||||
const router: Router = useRouter() |
||||
const fileStore = useFileStore() |
||||
const breadListRef = ref<Array<string>>() |
||||
|
||||
const { |
||||
variables, |
||||
columnsRef, |
||||
tableWidth, |
||||
requestData, |
||||
updateList, |
||||
handleCreateFile, |
||||
} = useTable() |
||||
|
||||
|
||||
variables.resourceType = props.resourceType |
||||
|
||||
const handleUpdatePage = (page: number) => { |
||||
variables.pagination.page = page |
||||
requestData() |
||||
} |
||||
|
||||
const handleUpdatePageSize = (pageSize: number) => { |
||||
variables.pagination.page = 1 |
||||
variables.pagination.pageSize = pageSize |
||||
requestData() |
||||
} |
||||
|
||||
const handleConditions = () => { |
||||
requestData() |
||||
} |
||||
|
||||
const handleCreateFolder = () => { |
||||
variables.folderShowRef = true |
||||
} |
||||
|
||||
const handleUploadFile = () => { |
||||
variables.isReupload = false |
||||
variables.uploadShowRef = true |
||||
} |
||||
|
||||
const handleRenameFile = () => { |
||||
variables.renameShowRef = true |
||||
} |
||||
|
||||
onMounted(() => { |
||||
fileStore.setCurrentDir(variables.fullName) |
||||
breadListRef.value = fileStore.getCurrentDir.replace(/\/+$/g, '') |
||||
.split('/').slice(2) as Array<string> |
||||
requestData() |
||||
|
||||
}) |
||||
|
||||
const trim = getCurrentInstance()?.appContext.config.globalProperties.trim |
||||
|
||||
const handleBread = (index: number) => { |
||||
const breadName = variables.fullName.split('/').slice(0, index+3).join('/')+'/' |
||||
goBread(breadName) |
||||
} |
||||
|
||||
const goBread = (fullName: string) => { |
||||
const { resourceType, tenantCode } = variables |
||||
if (fullName === '') { |
||||
router.push({ name: resourceType === 'UDF' ? 'resource-manage' : 'file-manage' }) |
||||
} else { |
||||
router.push({ |
||||
name: resourceType === 'UDF' ? 'resource-sub-manage' : 'resource-file-subdirectory', |
||||
query: { prefix: fullName, tenantCode: tenantCode} |
||||
}) |
||||
} |
||||
} |
||||
|
||||
return { |
||||
breadListRef, |
||||
columnsRef, |
||||
tableWidth, |
||||
updateList, |
||||
handleConditions, |
||||
handleCreateFolder, |
||||
handleCreateFile, |
||||
handleUploadFile, |
||||
handleRenameFile, |
||||
handleUpdatePage, |
||||
handleUpdatePageSize, |
||||
handleBread, |
||||
trim, |
||||
...toRefs(variables) |
||||
} |
||||
}, |
||||
render() { |
||||
const { t } = useI18n() |
||||
|
||||
const { |
||||
handleConditions, |
||||
handleCreateFolder, |
||||
handleCreateFile, |
||||
handleUploadFile, |
||||
columnsRef, |
||||
tableWidth, |
||||
} = this |
||||
const manageTitle = this.resourceType === 'UDF' |
||||
? t('resource.udf.udf_resources') |
||||
: t('resource.file.file_manage') |
||||
|
||||
return ( |
||||
<NSpace vertical> |
||||
<Card> |
||||
<NSpace justify='space-between'> |
||||
<NButtonGroup size='small'> |
||||
<NButton |
||||
type='primary' |
||||
onClick={handleCreateFolder} |
||||
class='btn-create-directory' |
||||
> |
||||
{t('resource.file.create_folder')} |
||||
</NButton> |
||||
{this.resourceType !== 'UDF' && |
||||
<NButton onClick={handleCreateFile} class='btn-create-file'> |
||||
{t('resource.file.create_file')} |
||||
</NButton> |
||||
} |
||||
<NButton onClick={handleUploadFile} class='btn-upload-resource'> |
||||
{this.resourceType === 'UDF' |
||||
? t('resource.udf.upload_udf_resources') |
||||
: t('resource.file.upload_files') |
||||
} |
||||
</NButton> |
||||
</NButtonGroup> |
||||
<NSpace> |
||||
<Search |
||||
placeholder = {t('resource.file.enter_keyword_tips')} |
||||
v-model:value={this.searchRef} |
||||
onSearch={handleConditions} |
||||
/> |
||||
<NButton size='small' type='primary' onClick={handleConditions}> |
||||
<NIcon> |
||||
<SearchOutlined/> |
||||
</NIcon> |
||||
</NButton> |
||||
</NSpace> |
||||
</NSpace> |
||||
</Card> |
||||
<Card title={manageTitle}> |
||||
{{ |
||||
header: () => ( |
||||
<NBreadcrumb separator='>'> |
||||
{this.breadListRef?.map((item, index) => ( |
||||
<NBreadcrumbItem> |
||||
<NButton |
||||
text |
||||
disabled={index > 0 && index === this.breadListRef!.length - 1} |
||||
onClick={() => this.handleBread(index)} |
||||
>{index === 0 ? manageTitle : item} |
||||
</NButton> |
||||
</NBreadcrumbItem> |
||||
))} |
||||
</NBreadcrumb> |
||||
), |
||||
default: () => ( |
||||
<NSpace vertical> |
||||
<NDataTable |
||||
remote |
||||
columns={columnsRef} |
||||
data={this.resourceList?.table} |
||||
striped |
||||
size={'small'} |
||||
class={styles['table-box']} |
||||
row-class-name='items' |
||||
scrollX={tableWidth} |
||||
/> |
||||
<NSpace justify='center'> |
||||
<NPagination |
||||
v-model:page={this.pagination.page} |
||||
v-model:pageSize={this.pagination.pageSize} |
||||
pageSizes={this.pagination.pageSizes} |
||||
item-count={this.pagination.itemCount} |
||||
onUpdatePage={this.handleUpdatePage} |
||||
onUpdatePageSize={this.handleUpdatePageSize} |
||||
show-quick-jumper |
||||
show-size-picker |
||||
/> |
||||
</NSpace> |
||||
</NSpace> |
||||
) |
||||
}} |
||||
</Card> |
||||
<ResourceFolderModal |
||||
v-model:show={this.folderShowRef} |
||||
resourceType={this.resourceType} |
||||
onUpdateList={this.updateList} |
||||
/> |
||||
<ResourceUploadModal |
||||
v-model:show={this.uploadShowRef} |
||||
isReupload={this.isReupload} |
||||
resourceType={this.resourceType} |
||||
name={this.reuploadInfo.name} |
||||
fullName={this.reuploadInfo.fullName} |
||||
description={this.reuploadInfo.description} |
||||
userName={this.reuploadInfo.user_name} |
||||
onUpdateList={this.updateList} |
||||
/> |
||||
<ResourceRenameModal |
||||
v-model:show={this.renameShowRef} |
||||
resourceType={this.resourceType} |
||||
name={this.renameInfo.name} |
||||
fullName={this.renameInfo.fullName} |
||||
description={this.renameInfo.description} |
||||
userName={this.renameInfo.user_name} |
||||
onUpdateList={this.updateList} |
||||
/> |
||||
</NSpace> |
||||
) |
||||
} |
||||
}) |
||||
@ -0,0 +1,229 @@
|
||||
/* |
||||
* 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, reactive, ref } from 'vue' |
||||
import { useI18n } from 'vue-i18n' |
||||
import { useRouter } from 'vue-router' |
||||
import { bytesToSize } from '@/common/common' |
||||
import TableAction from './table-action' |
||||
import { IRenameResource, IReuploadResource, ResourceFileTableData, ResourceType } from '../types' |
||||
import ButtonLink from '@/components/button-link' |
||||
import { NEllipsis } from 'naive-ui' |
||||
import { |
||||
COLUMN_WIDTH_CONFIG, |
||||
calculateTableWidth, |
||||
DefaultTableWidth |
||||
} from '@/common/column-width-config' |
||||
import type { Router } from 'vue-router' |
||||
import type { TableColumns } from 'naive-ui/es/data-table/src/interface' |
||||
import { useFileState } from "@/views/resource/components/resource/use-file"; |
||||
|
||||
const goSubFolder = (router: Router, item: ResourceFileTableData) => { |
||||
if (item.directory) { |
||||
router.push({ |
||||
name: item.type === 'UDF' ? 'resource-sub-manage' : 'resource-file-subdirectory', |
||||
query: { prefix: item.fullName, tenantCode: item.user_name} |
||||
}) |
||||
} else if (item.type === 'FILE') { |
||||
router.push({ name: 'resource-file-list', query: {prefix: item.fullName, tenantCode: item.user_name}} ) |
||||
} |
||||
} |
||||
|
||||
|
||||
export function useTable() { |
||||
const { t } = useI18n() |
||||
const router: Router = useRouter() |
||||
|
||||
const variables = reactive({ |
||||
fullName: ref(String(router.currentRoute.value.query.prefix || "")), |
||||
tenantCode: ref(String(router.currentRoute.value.query.tenantCode || "")), |
||||
resourceType: ref<ResourceType>(), |
||||
resourceList: ref(), |
||||
folderShowRef: ref(false), |
||||
uploadShowRef: ref(false), |
||||
isReupload: ref(false), |
||||
renameShowRef: ref(false), |
||||
searchRef: ref(), |
||||
renameInfo: ref({ |
||||
name: '', |
||||
description: '', |
||||
fullName: '', |
||||
user_name: '' |
||||
}), |
||||
reuploadInfo: ref({ |
||||
name: '', |
||||
description: '', |
||||
fullName: '', |
||||
user_name: '' |
||||
}), |
||||
pagination: ref({ |
||||
page: 1, |
||||
pageSize: 10, |
||||
itemCount: 0, |
||||
pageSizes: [10, 30, 50] |
||||
|
||||
}) |
||||
}) |
||||
|
||||
const columnsRef: TableColumns<any> = [ |
||||
{ |
||||
title: '#', |
||||
key: 'id', |
||||
...COLUMN_WIDTH_CONFIG['index'], |
||||
render: (_row, index) => index + 1 |
||||
}, |
||||
{ |
||||
title: t('resource.file.name'), |
||||
key: 'name', |
||||
...COLUMN_WIDTH_CONFIG['linkName'], |
||||
render: (row) => { |
||||
return !row.directory |
||||
? row.alias |
||||
: h( |
||||
ButtonLink, |
||||
{ |
||||
onClick: () => goSubFolder(router, row) |
||||
}, |
||||
{ |
||||
default: () => |
||||
h( |
||||
NEllipsis, |
||||
COLUMN_WIDTH_CONFIG['linkEllipsis'], |
||||
() => row.alias |
||||
) |
||||
} |
||||
) |
||||
} |
||||
}, |
||||
{ |
||||
title: t('resource.file.tenant_name'), |
||||
...COLUMN_WIDTH_CONFIG['userName'], |
||||
key: 'user_name' |
||||
}, |
||||
{ |
||||
title: t('resource.file.whether_directory'), |
||||
key: 'whether_directory', |
||||
...COLUMN_WIDTH_CONFIG['yesOrNo'], |
||||
render: (row) => |
||||
row.directory ? t('resource.file.yes') : t('resource.file.no') |
||||
}, |
||||
{ |
||||
title: t('resource.file.file_name'), |
||||
...COLUMN_WIDTH_CONFIG['name'], |
||||
key: 'file_name' |
||||
}, |
||||
{ |
||||
title: t('resource.file.description'), |
||||
...COLUMN_WIDTH_CONFIG['note'], |
||||
key: 'description' |
||||
}, |
||||
{ |
||||
title: t('resource.file.size'), |
||||
key: 'size', |
||||
...COLUMN_WIDTH_CONFIG['size'], |
||||
render: (row) => bytesToSize(row.size) |
||||
}, |
||||
{ |
||||
title: t('resource.file.create_time'), |
||||
...COLUMN_WIDTH_CONFIG['time'], |
||||
key: 'create_time' |
||||
}, |
||||
{ |
||||
title: t('resource.file.update_time'), |
||||
...COLUMN_WIDTH_CONFIG['time'], |
||||
key: 'update_time' |
||||
}, |
||||
{ |
||||
title: t('resource.file.operation'), |
||||
key: 'operation', |
||||
render: (row) => |
||||
h(TableAction, { |
||||
row, |
||||
onReuploadResource: ( name, description, fullName, user_name ) => |
||||
reuploadResource( name, description, fullName, user_name ), |
||||
onRenameResource: ( name, description, fullName, user_name ) => |
||||
renameResource( name, description, fullName, user_name ), |
||||
onUpdateList: () => updateList() |
||||
}), |
||||
...COLUMN_WIDTH_CONFIG['operation'](variables.resourceType === 'UDF' ? 4 : 5) |
||||
} |
||||
] |
||||
|
||||
const createFile = () => { |
||||
const { fullName } = variables |
||||
const name = fullName |
||||
? 'resource-subfile-create' |
||||
: 'resource-file-create' |
||||
router.push({ |
||||
name, |
||||
params: { id: fullName} |
||||
}) |
||||
} |
||||
|
||||
const reuploadResource: IReuploadResource = ( name, description, fullName, user_name ) => { |
||||
variables.reuploadInfo = { |
||||
name: name, |
||||
description: description, |
||||
fullName: fullName, |
||||
user_name:user_name |
||||
} |
||||
variables.isReupload = true |
||||
variables.uploadShowRef = true |
||||
} |
||||
|
||||
const renameResource: IRenameResource = ( name, description, fullName, user_name ) => { |
||||
variables.renameInfo = { |
||||
name: name, |
||||
description: description, |
||||
fullName: fullName, |
||||
user_name:user_name |
||||
} |
||||
variables.renameShowRef = true |
||||
} |
||||
|
||||
const setPagination = (count: number) => { |
||||
variables.pagination.itemCount = count |
||||
} |
||||
|
||||
const { getResourceListState } = useFileState(setPagination) |
||||
|
||||
const requestData = () => { |
||||
variables.resourceList = getResourceListState( |
||||
variables.resourceType!, |
||||
variables.fullName, |
||||
variables.tenantCode, |
||||
variables.searchRef, |
||||
variables.pagination.page, |
||||
variables.pagination.pageSize |
||||
) |
||||
} |
||||
|
||||
|
||||
const updateList = () => { |
||||
variables.pagination.page = 1 |
||||
requestData() |
||||
} |
||||
|
||||
return { |
||||
variables, |
||||
columnsRef, |
||||
tableWidth: calculateTableWidth(columnsRef) || DefaultTableWidth, |
||||
requestData, |
||||
updateList, |
||||
handleCreateFile: createFile, |
||||
} |
||||
} |
||||
@ -1,120 +0,0 @@
|
||||
/* |
||||
* 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 } from 'vue' |
||||
import { useI18n } from 'vue-i18n' |
||||
import { useRouter } from 'vue-router' |
||||
import { bytesToSize } from '@/common/common' |
||||
import { useFileStore } from '@/store/file/file' |
||||
import TableAction from './table-action' |
||||
import { IRenameFile } from '../types' |
||||
import ButtonLink from '@/components/button-link' |
||||
import { NEllipsis } from 'naive-ui' |
||||
import { |
||||
COLUMN_WIDTH_CONFIG, |
||||
calculateTableWidth, |
||||
DefaultTableWidth |
||||
} from '@/common/column-width-config' |
||||
import type { Router } from 'vue-router' |
||||
import type { TableColumns } from 'naive-ui/es/data-table/src/interface' |
||||
|
||||
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-file-subdirectory', query: { prefix: item.fullName, tenantCode: item.user_name}}) |
||||
} else { |
||||
router.push({ name: 'resource-file-list', query: {prefix: item.fullName, tenantCode: item.user_name} }) |
||||
} |
||||
} |
||||
|
||||
export function useTable(renameResource: IRenameFile, updateList: () => void) { |
||||
const { t } = useI18n() |
||||
const router: Router = useRouter() |
||||
|
||||
const columnsRef: TableColumns<any> = [ |
||||
{ |
||||
title: '#', |
||||
key: 'id', |
||||
...COLUMN_WIDTH_CONFIG['index'], |
||||
render: (_row, index) => index + 1 |
||||
}, |
||||
{ |
||||
title: t('resource.file.name'), |
||||
key: 'name', |
||||
...COLUMN_WIDTH_CONFIG['linkName'], |
||||
render: (row) => |
||||
h( |
||||
ButtonLink, |
||||
{ |
||||
onClick: () => void goSubFolder(router, row) |
||||
}, |
||||
{ |
||||
default: () => |
||||
h(NEllipsis, COLUMN_WIDTH_CONFIG['linkEllipsis'], () => row.name) |
||||
} |
||||
) |
||||
}, |
||||
{ |
||||
title: t('resource.file.tenant_name'), |
||||
...COLUMN_WIDTH_CONFIG['userName'], |
||||
key: 'user_name' |
||||
}, |
||||
{ |
||||
title: t('resource.file.whether_directory'), |
||||
key: 'whether_directory', |
||||
...COLUMN_WIDTH_CONFIG['yesOrNo'], |
||||
render: (row) => |
||||
row.directory ? t('resource.file.yes') : t('resource.file.no') |
||||
}, |
||||
{ |
||||
title: t('resource.file.file_name'), |
||||
...COLUMN_WIDTH_CONFIG['name'], |
||||
key: 'fullName' |
||||
}, |
||||
{ |
||||
title: t('resource.file.size'), |
||||
key: 'size', |
||||
...COLUMN_WIDTH_CONFIG['size'], |
||||
render: (row) => bytesToSize(row.size) |
||||
}, |
||||
{ |
||||
title: t('resource.file.update_time'), |
||||
...COLUMN_WIDTH_CONFIG['time'], |
||||
key: 'update_time' |
||||
}, |
||||
{ |
||||
title: t('resource.file.operation'), |
||||
key: 'operation', |
||||
render: (row) => |
||||
h(TableAction, { |
||||
row, |
||||
onRenameResource: ( name, description, fullName, user_name ) => { |
||||
renameResource(name, description, fullName, user_name) |
||||
}, |
||||
onUpdateList: () => updateList() |
||||
}), |
||||
...COLUMN_WIDTH_CONFIG['operation'](4) |
||||
} |
||||
] |
||||
|
||||
return { |
||||
columnsRef, |
||||
tableWidth: calculateTableWidth(columnsRef) || DefaultTableWidth |
||||
} |
||||
} |
||||
@ -1,130 +0,0 @@
|
||||
/* |
||||
* 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, |
||||
computed, |
||||
getCurrentInstance |
||||
} from 'vue' |
||||
import { NForm, NFormItem, NInput } from 'naive-ui' |
||||
import { useI18n } from 'vue-i18n' |
||||
import Modal from '@/components/modal' |
||||
import { noSpace } from '@/utils/trim' |
||||
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.fullName) |
||||
} |
||||
|
||||
const trim = getCurrentInstance()?.appContext.config.globalProperties.trim |
||||
|
||||
watch( |
||||
() => props.row, |
||||
() => { |
||||
state.folderForm.name = props.row.alias |
||||
state.folderForm.description = props.row.description |
||||
} |
||||
) |
||||
const fileEdit = computed(() => props.row.fullName && !props.row.directory) |
||||
|
||||
return { |
||||
fileEdit, |
||||
hideModal, |
||||
handleCreate, |
||||
handleRename, |
||||
...toRefs(state), |
||||
trim |
||||
} |
||||
}, |
||||
render() { |
||||
const { t } = useI18n() |
||||
|
||||
return ( |
||||
<Modal |
||||
show={this.$props.show} |
||||
title={ |
||||
this.row.fullName ? t('resource.udf.edit') : t('resource.udf.create_folder') |
||||
} |
||||
onCancel={this.hideModal} |
||||
onConfirm={this.row.fullName ? this.handleRename : this.handleCreate} |
||||
confirmClassName='btn-submit' |
||||
cancelClassName='btn-cancel' |
||||
confirmLoading={this.saving} |
||||
> |
||||
<NForm rules={this.rules} ref='folderFormRef'> |
||||
<NFormItem |
||||
label={ |
||||
this.fileEdit |
||||
? t('resource.udf.file_name') |
||||
: t('resource.udf.folder_name') |
||||
} |
||||
path='name' |
||||
> |
||||
<NInput |
||||
allowInput={this.fileEdit ? this.trim : noSpace} |
||||
v-model={[this.folderForm.name, 'value']} |
||||
placeholder={t('resource.udf.enter_name_tips')} |
||||
class='input-directory-name' |
||||
/> |
||||
</NFormItem> |
||||
<NFormItem label={t('resource.udf.description')} path='description'> |
||||
<NInput |
||||
allowInput={this.trim} |
||||
type='textarea' |
||||
v-model={[this.folderForm.description, 'value']} |
||||
placeholder={t('resource.udf.enter_description_tips')} |
||||
class='input-description' |
||||
/> |
||||
</NFormItem> |
||||
</NForm> |
||||
</Modal> |
||||
) |
||||
} |
||||
}) |
||||
@ -1,124 +0,0 @@
|
||||
/* |
||||
* 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, getCurrentInstance } 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 = () => { |
||||
state.uploadForm.name = '' |
||||
state.uploadForm.description = '' |
||||
state.uploadForm.file = '' |
||||
ctx.emit('update:show') |
||||
} |
||||
|
||||
const handleFolder = () => { |
||||
handleUploadFile() |
||||
} |
||||
|
||||
const customRequest = ({ file }: any) => { |
||||
state.uploadForm.name = file.name |
||||
state.uploadForm.file = file.file |
||||
state.uploadFormRef.validate() |
||||
} |
||||
|
||||
const removeFile = () => { |
||||
state.uploadForm.name = '' |
||||
state.uploadForm.file = '' |
||||
} |
||||
|
||||
const trim = getCurrentInstance()?.appContext.config.globalProperties.trim |
||||
|
||||
return { |
||||
hideModal, |
||||
handleFolder, |
||||
customRequest, |
||||
removeFile, |
||||
...toRefs(state), |
||||
trim |
||||
} |
||||
}, |
||||
render() { |
||||
const { t } = useI18n() |
||||
return ( |
||||
<Modal |
||||
show={this.$props.show} |
||||
title={t('resource.udf.file_upload')} |
||||
onCancel={this.hideModal} |
||||
onConfirm={this.handleFolder} |
||||
confirmClassName='btn-submit' |
||||
cancelClassName='btn-cancel' |
||||
confirmLoading={this.saving} |
||||
> |
||||
<NForm rules={this.rules} ref='uploadFormRef'> |
||||
<NFormItem label={t('resource.udf.file_name')} path='name'> |
||||
<NInput |
||||
allowInput={this.trim} |
||||
v-model={[this.uploadForm.name, 'value']} |
||||
placeholder={t('resource.udf.enter_name_tips')} |
||||
class='input-file-name' |
||||
/> |
||||
</NFormItem> |
||||
<NFormItem label={t('resource.udf.description')} path='description'> |
||||
<NInput |
||||
allowInput={this.trim} |
||||
type='textarea' |
||||
v-model={[this.uploadForm.description, 'value']} |
||||
placeholder={t('resource.udf.enter_description_tips')} |
||||
class='input-description' |
||||
/> |
||||
</NFormItem> |
||||
<NFormItem label={t('resource.udf.upload_files')} path='file'> |
||||
<NUpload |
||||
v-model={[this.uploadForm.file, 'value']} |
||||
customRequest={this.customRequest} |
||||
max={1} |
||||
class='btn-upload' |
||||
onRemove={this.removeFile} |
||||
> |
||||
<NButton> |
||||
{t('resource.udf.upload')} |
||||
<NIcon> |
||||
<CloudUploadOutlined /> |
||||
</NIcon> |
||||
</NButton> |
||||
</NUpload> |
||||
</NFormItem> |
||||
</NForm> |
||||
</Modal> |
||||
) |
||||
} |
||||
}) |
||||
@ -1,84 +0,0 @@
|
||||
/* |
||||
* 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: '/' |
||||
}, |
||||
saving: false, |
||||
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: '/' |
||||
}, |
||||
saving: false, |
||||
rules: { |
||||
name: { |
||||
required: true, |
||||
trigger: ['input', 'blur'], |
||||
validator() { |
||||
if (uploadState.uploadForm.name === '') { |
||||
return new Error(t('resource.udf.enter_name_tips')) |
||||
} |
||||
} |
||||
}, |
||||
file: { |
||||
required: true, |
||||
trigger: ['input', 'blur'], |
||||
validator() { |
||||
if (uploadState.uploadForm.file === '') { |
||||
return new Error(t('resource.file.enter_content_tips')) |
||||
} |
||||
} |
||||
} |
||||
} as FormRules |
||||
}) |
||||
|
||||
return { |
||||
folderState, |
||||
uploadState |
||||
} |
||||
} |
||||
@ -1,117 +0,0 @@
|
||||
/* |
||||
* 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 currentFullName = String(router.currentRoute.value.query.prefix || "") |
||||
const currentDir = currentFullName == "" ? '/' : fileStore.getCurrentDir || '/' |
||||
submitRequest( |
||||
async () => |
||||
await createDirectory({ |
||||
...state.folderForm, |
||||
...{ pid, currentDir } |
||||
}) |
||||
) |
||||
} |
||||
|
||||
const handleRenameResource = async (fullName: string) => { |
||||
submitRequest(async () => { |
||||
await updateResource( |
||||
{ |
||||
fullName: fullName, |
||||
...state.folderForm, |
||||
} |
||||
) |
||||
}) |
||||
} |
||||
|
||||
const submitRequest = async (serviceHandle: any) => { |
||||
await state.folderFormRef.validate() |
||||
if (state.saving) return |
||||
state.saving = true |
||||
|
||||
try { |
||||
await serviceHandle() |
||||
window.$message.success(t('resource.udf.success')) |
||||
state.saving = false |
||||
ctx.emit('updateList') |
||||
ctx.emit('update:show') |
||||
} catch (err) { |
||||
state.saving = false |
||||
} |
||||
} |
||||
|
||||
const resetUploadForm = () => { |
||||
state.uploadForm.name = '' |
||||
state.uploadForm.file = '' |
||||
state.uploadForm.description = '' |
||||
} |
||||
|
||||
const handleUploadFile = async () => { |
||||
await state.uploadFormRef.validate() |
||||
|
||||
if (state.saving) return |
||||
state.saving = true |
||||
|
||||
try { |
||||
const pid = Number(router.currentRoute.value.params.id) || "-1" |
||||
const currentFullName = String(router.currentRoute.value.query.prefix || "") |
||||
const currentDir = currentFullName == "" ? '/' : fileStore.getCurrentDir || '/' |
||||
|
||||
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) |
||||
|
||||
await createResource(formData as any) |
||||
window.$message.success(t('resource.udf.success')) |
||||
ctx.emit('updateList') |
||||
ctx.emit('update:show') |
||||
resetUploadForm() |
||||
} finally { |
||||
state.saving = false |
||||
} |
||||
} |
||||
|
||||
return { |
||||
handleCreateResource, |
||||
handleRenameResource, |
||||
handleUploadFile |
||||
} |
||||
} |
||||
@ -1,43 +0,0 @@
|
||||
/* |
||||
* 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. |
||||
*/ |
||||
|
||||
.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; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -1,40 +0,0 @@
|
||||
/* |
||||
* 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 { |
||||
fullName: string |
||||
tenantCode: string |
||||
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 |
||||
} |
||||
@ -1,320 +0,0 @@
|
||||
/* |
||||
* 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 '@/common/common' |
||||
import { useFileStore } from '@/store/file/file' |
||||
import type { Router } from 'vue-router' |
||||
import { NEllipsis } from 'naive-ui' |
||||
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, |
||||
queryCurrentResourceByFileName, |
||||
queryCurrentResourceByFullName |
||||
} from '@/service/modules/resources' |
||||
import ButtonLink from '@/components/button-link' |
||||
import { |
||||
COLUMN_WIDTH_CONFIG, |
||||
calculateTableWidth, |
||||
DefaultTableWidth |
||||
} from '@/common/column-width-config' |
||||
import type { IUdfResourceParam } from './types' |
||||
import { ResourceFile } from '@/service/modules/resources/types' |
||||
|
||||
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', |
||||
query: {prefix: item.fullName, tenantCode: item.userName} }) |
||||
} |
||||
} |
||||
|
||||
export function useTable() { |
||||
const { t } = useI18n() |
||||
const router: Router = useRouter() |
||||
const fileStore = useFileStore() |
||||
|
||||
const variables = reactive({ |
||||
columns: [], |
||||
tableWidth: DefaultTableWidth, |
||||
row: {}, |
||||
tableData: [], |
||||
breadList: [] as String[], |
||||
fullName: ref(String(router.currentRoute.value.query.prefix || "")), |
||||
tenantCode: ref(String(router.currentRoute.value.query.tenantCode || "")), |
||||
page: ref(1), |
||||
pageSize: ref(10), |
||||
searchVal: ref(), |
||||
totalPage: ref(1), |
||||
folderShowRef: ref(false), |
||||
uploadShowRef: ref(false), |
||||
loadingRef: ref(false) |
||||
}) |
||||
|
||||
const createColumns = (variables: any) => { |
||||
variables.columns = [ |
||||
{ |
||||
title: '#', |
||||
key: 'id', |
||||
...COLUMN_WIDTH_CONFIG['index'], |
||||
render: (_row, index) => index + 1 |
||||
}, |
||||
{ |
||||
title: t('resource.udf.udf_source_name'), |
||||
key: 'alias', |
||||
...COLUMN_WIDTH_CONFIG['linkName'], |
||||
render: (row) => { |
||||
return !row.directory |
||||
? row.alias |
||||
: h( |
||||
ButtonLink, |
||||
{ |
||||
onClick: () => void goSubFolder(router, row) |
||||
}, |
||||
{ |
||||
default: () => |
||||
h( |
||||
NEllipsis, |
||||
COLUMN_WIDTH_CONFIG['linkEllipsis'], |
||||
() => row.alias |
||||
) |
||||
} |
||||
) |
||||
} |
||||
}, |
||||
{ |
||||
title: t('resource.udf.tenant_name'), |
||||
...COLUMN_WIDTH_CONFIG['userName'], |
||||
key: 'userName' |
||||
}, |
||||
{ |
||||
title: t('resource.udf.whether_directory'), |
||||
key: 'whether_directory', |
||||
...COLUMN_WIDTH_CONFIG['yesOrNo'], |
||||
render: (row) => |
||||
row.directory ? t('resource.file.yes') : t('resource.file.no') |
||||
}, |
||||
{ |
||||
title: t('resource.udf.file_name'), |
||||
...COLUMN_WIDTH_CONFIG['name'], |
||||
key: 'fullName' |
||||
}, |
||||
{ |
||||
title: t('resource.udf.file_size'), |
||||
key: 'size', |
||||
...COLUMN_WIDTH_CONFIG['size'], |
||||
render: (row) => bytesToSize(row.size) |
||||
}, |
||||
{ |
||||
title: t('resource.udf.create_time'), |
||||
key: 'createTime', |
||||
...COLUMN_WIDTH_CONFIG['time'] |
||||
}, |
||||
{ |
||||
title: t('resource.udf.update_time'), |
||||
key: 'updateTime', |
||||
...COLUMN_WIDTH_CONFIG['time'] |
||||
}, |
||||
{ |
||||
title: t('resource.udf.operation'), |
||||
key: 'operation', |
||||
...COLUMN_WIDTH_CONFIG['operation'](3), |
||||
render: (row) => { |
||||
return h(NSpace, null, { |
||||
default: () => [ |
||||
h( |
||||
NTooltip, |
||||
{}, |
||||
{ |
||||
trigger: () => |
||||
h( |
||||
NButton, |
||||
{ |
||||
tag: 'div', |
||||
circle: true, |
||||
type: 'info', |
||||
size: 'tiny', |
||||
class: 'btn-edit', |
||||
onClick: () => { |
||||
handleEdit(row) |
||||
} |
||||
}, |
||||
{ |
||||
icon: () => h(EditOutlined) |
||||
} |
||||
), |
||||
default: () => t('resource.udf.edit') |
||||
} |
||||
), |
||||
h( |
||||
NTooltip, |
||||
{}, |
||||
{ |
||||
trigger: () => |
||||
h( |
||||
NButton, |
||||
{ |
||||
tag: 'div', |
||||
circle: true, |
||||
type: 'info', |
||||
size: 'tiny', |
||||
class: 'btn-download', |
||||
disabled: row?.directory ? true : false, |
||||
onClick: () => downloadResource({fullName: row.fullName}) |
||||
}, |
||||
{ |
||||
icon: () => h(DownloadOutlined) |
||||
} |
||||
), |
||||
default: () => t('resource.udf.download') |
||||
} |
||||
), |
||||
h( |
||||
NPopconfirm, |
||||
{ |
||||
onPositiveClick: () => { |
||||
handleDelete({fullName: row.fullName, tenantCode: row.userName}) |
||||
} |
||||
}, |
||||
{ |
||||
trigger: () => |
||||
h( |
||||
NTooltip, |
||||
{}, |
||||
{ |
||||
trigger: () => |
||||
h( |
||||
NButton, |
||||
{ |
||||
tag: 'div', |
||||
circle: true, |
||||
type: 'error', |
||||
size: 'tiny', |
||||
class: 'btn-delete' |
||||
}, |
||||
{ |
||||
icon: () => h(DeleteOutlined) |
||||
} |
||||
), |
||||
default: () => t('resource.udf.delete') |
||||
} |
||||
), |
||||
default: () => t('resource.udf.delete_confirm') |
||||
} |
||||
) |
||||
] |
||||
}) |
||||
} |
||||
} |
||||
] as TableColumns<any> |
||||
if (variables.tableWidth) { |
||||
variables.tableWidth = calculateTableWidth(variables.columns) |
||||
} |
||||
} |
||||
|
||||
const getTableData = (params: IUdfResourceParam) => { |
||||
if (variables.loadingRef) return |
||||
variables.loadingRef = true |
||||
const { state } = useAsyncState( |
||||
queryResourceListPaging({ ...params, type: 'UDF' }).then((res: any) => { |
||||
// use strict checking here
|
||||
if (variables.fullName !== ""){ |
||||
queryCurrentResourceByFullName( |
||||
{ |
||||
type: 'UDF', |
||||
fullName: variables.fullName, |
||||
tenantCode: variables.tenantCode, |
||||
} |
||||
).then((res: ResourceFile) => { |
||||
if (res.fileName) { |
||||
const breadList = res.fileName.split('/') |
||||
// pop the alias from the fullname path
|
||||
breadList.pop() |
||||
variables.breadList = breadList |
||||
} |
||||
}) |
||||
} else { |
||||
variables.breadList = [] |
||||
} |
||||
variables.totalPage = res.totalPage |
||||
variables.tableData = res.totalList.map((item: any) => { |
||||
return { ...item } |
||||
}) |
||||
variables.loadingRef = false |
||||
}), |
||||
{ total: 0, table: [] } |
||||
) |
||||
return state |
||||
} |
||||
|
||||
const handleEdit = (row: any) => { |
||||
variables.folderShowRef = true |
||||
variables.row = row |
||||
} |
||||
|
||||
const handleDelete = (fullNameObj: {fullName: string, tenantCode: string}) => { |
||||
/* 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(fullNameObj).then(() => |
||||
getTableData({ |
||||
id: -1, |
||||
fullName: variables.fullName, |
||||
tenantCode: variables.tenantCode, |
||||
pageSize: variables.pageSize, |
||||
pageNo: variables.page, |
||||
searchVal: variables.searchVal |
||||
}) |
||||
) |
||||
} |
||||
|
||||
const goUdfManage = () => { |
||||
router.push({ name: 'resource-manage' }) |
||||
} |
||||
|
||||
const goBread = (fileName: string) => { |
||||
queryCurrentResourceByFileName( |
||||
{ |
||||
type: 'UDF', |
||||
fileName: fileName + "/", |
||||
tenantCode: variables.tenantCode |
||||
} |
||||
).then((res: any) => { |
||||
fileStore.setCurrentDir(res.fullName) |
||||
router.push({ name: 'resource-sub-manage', query: {prefix: res.fullName, tenantCode: res.userName} }) |
||||
}) |
||||
} |
||||
|
||||
return { |
||||
variables, |
||||
createColumns, |
||||
getTableData, |
||||
goUdfManage, |
||||
goBread |
||||
} |
||||
} |
||||
Loading…
Reference in new issue