Browse Source
* Change DOM label * Change name to lowercase * Limit customization file content to no more than 3000 lines * dd branch flow node verification * datax * datax add custom * Change normalize.scss import method and animation.scss license modification * Resource tree code mergepull/2/head
break60
4 years ago
committed by
GitHub
52 changed files with 3240 additions and 354 deletions
@ -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. |
||||||
|
*/ |
||||||
|
<template> |
||||||
|
<m-list-construction :title="$t('Create folder')"> |
||||||
|
<template slot="content"> |
||||||
|
<div class="resource-create-model"> |
||||||
|
<m-list-box-f> |
||||||
|
<template slot="name"><strong>*</strong>{{$t('Folder Name')}}</template> |
||||||
|
<template slot="content"> |
||||||
|
<x-input |
||||||
|
type="input" |
||||||
|
v-model="name" |
||||||
|
maxlength="60" |
||||||
|
style="width: 300px;" |
||||||
|
:placeholder="$t('Please enter name')" |
||||||
|
autocomplete="off"> |
||||||
|
</x-input> |
||||||
|
</template> |
||||||
|
</m-list-box-f> |
||||||
|
<!-- <m-list-box-f> |
||||||
|
<template slot="name"><strong>*</strong>{{$t('Folder Format')}}</template> |
||||||
|
<template slot="content"> |
||||||
|
<x-select v-model="type" style="width: 100px;"> |
||||||
|
<x-option |
||||||
|
v-for="item in folderList" |
||||||
|
:key="item.value" |
||||||
|
:value="item.value" |
||||||
|
:label="item.label"> |
||||||
|
</x-option> |
||||||
|
</x-select> |
||||||
|
</template> |
||||||
|
</m-list-box-f> --> |
||||||
|
<m-list-box-f> |
||||||
|
<template slot="name">{{$t('Description')}}</template> |
||||||
|
<template slot="content"> |
||||||
|
<x-input |
||||||
|
type="textarea" |
||||||
|
v-model="description" |
||||||
|
style="width: 430px;" |
||||||
|
:placeholder="$t('Please enter description')" |
||||||
|
autocomplete="off"> |
||||||
|
</x-input> |
||||||
|
</template> |
||||||
|
</m-list-box-f> |
||||||
|
<m-list-box-f> |
||||||
|
<template slot="name"> </template> |
||||||
|
<template slot="content"> |
||||||
|
<div class="submit"> |
||||||
|
<x-button type="primary" shape="circle" :loading="spinnerLoading" @click="ok()">{{spinnerLoading ? 'Loading...' : $t('Create')}} </x-button> |
||||||
|
<x-button type="text" @click="() => $router.push({name: 'file'})"> {{$t('Cancel')}} </x-button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</m-list-box-f> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</m-list-construction> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import i18n from '@/module/i18n' |
||||||
|
import { mapActions } from 'vuex' |
||||||
|
import { folderList } from '../_source/common' |
||||||
|
import { handlerSuffix } from '../details/_source/utils' |
||||||
|
import mListBoxF from '@/module/components/listBoxF/listBoxF' |
||||||
|
import mSpin from '@/module/components/spin/spin' |
||||||
|
import mConditions from '@/module/components/conditions/conditions' |
||||||
|
import localStore from '@/module/util/localStorage' |
||||||
|
import mListConstruction from '@/module/components/listConstruction/listConstruction' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'resource-list-create-FILE', |
||||||
|
data () { |
||||||
|
return { |
||||||
|
type: '', |
||||||
|
name: '', |
||||||
|
description: '', |
||||||
|
folderList: folderList, |
||||||
|
spinnerLoading: false |
||||||
|
} |
||||||
|
}, |
||||||
|
props: {}, |
||||||
|
methods: { |
||||||
|
...mapActions('resource', ['createResourceFolder']), |
||||||
|
ok () { |
||||||
|
if (this._validation()) { |
||||||
|
this.spinnerLoading = true |
||||||
|
this.createResourceFolder({ |
||||||
|
type: 'FILE', |
||||||
|
name: this.name, |
||||||
|
currentDir: '/', |
||||||
|
pid: -1, |
||||||
|
description: this.description |
||||||
|
}).then(res => { |
||||||
|
this.$message.success(res.msg) |
||||||
|
setTimeout(() => { |
||||||
|
this.spinnerLoading = false |
||||||
|
this.$router.push({ path: `/resource/file`}) |
||||||
|
}, 800) |
||||||
|
}).catch(e => { |
||||||
|
this.$message.error(e.msg || '') |
||||||
|
this.spinnerLoading = false |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
_validation () { |
||||||
|
if (!this.name) { |
||||||
|
this.$message.warning(`${i18n.$t('Please enter resource folder name')}`) |
||||||
|
return false |
||||||
|
} |
||||||
|
|
||||||
|
return true |
||||||
|
}, |
||||||
|
}, |
||||||
|
watch: {}, |
||||||
|
created () { |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
this.$modal.destroy() |
||||||
|
}, |
||||||
|
destroyed () { |
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
components: { mListConstruction, mConditions, mSpin, mListBoxF } |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" rel="stylesheet/scss"> |
||||||
|
.resource-create-model { |
||||||
|
padding: 30px; |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,131 @@ |
|||||||
|
/* |
||||||
|
* 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. |
||||||
|
*/ |
||||||
|
<template> |
||||||
|
<m-list-construction :title="$t('Create folder')"> |
||||||
|
<template slot="content"> |
||||||
|
<div class="resource-create-model"> |
||||||
|
<m-list-box-f> |
||||||
|
<template slot="name"><strong>*</strong>{{$t('Folder Name')}}</template> |
||||||
|
<template slot="content"> |
||||||
|
<x-input |
||||||
|
type="input" |
||||||
|
v-model="name" |
||||||
|
maxlength="60" |
||||||
|
style="width: 300px;" |
||||||
|
:placeholder="$t('Please enter name')" |
||||||
|
autocomplete="off"> |
||||||
|
</x-input> |
||||||
|
</template> |
||||||
|
</m-list-box-f> |
||||||
|
<m-list-box-f> |
||||||
|
<template slot="name">{{$t('Description')}}</template> |
||||||
|
<template slot="content"> |
||||||
|
<x-input |
||||||
|
type="textarea" |
||||||
|
v-model="description" |
||||||
|
style="width: 430px;" |
||||||
|
:placeholder="$t('Please enter description')" |
||||||
|
autocomplete="off"> |
||||||
|
</x-input> |
||||||
|
</template> |
||||||
|
</m-list-box-f> |
||||||
|
<m-list-box-f> |
||||||
|
<template slot="name"> </template> |
||||||
|
<template slot="content"> |
||||||
|
<div class="submit"> |
||||||
|
<x-button type="primary" shape="circle" :loading="spinnerLoading" @click="ok()">{{spinnerLoading ? 'Loading...' : $t('Create')}} </x-button> |
||||||
|
<x-button type="text" @click="() => $router.push({name: 'resource-udf'})"> {{$t('Cancel')}} </x-button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</m-list-box-f> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</m-list-construction> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import i18n from '@/module/i18n' |
||||||
|
import { mapActions } from 'vuex' |
||||||
|
import { folderList } from '../_source/common' |
||||||
|
import { handlerSuffix } from '../details/_source/utils' |
||||||
|
import mListBoxF from '@/module/components/listBoxF/listBoxF' |
||||||
|
import mSpin from '@/module/components/spin/spin' |
||||||
|
import mConditions from '@/module/components/conditions/conditions' |
||||||
|
import localStore from '@/module/util/localStorage' |
||||||
|
import mListConstruction from '@/module/components/listConstruction/listConstruction' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'resource-list-create-udf', |
||||||
|
data () { |
||||||
|
return { |
||||||
|
type: '', |
||||||
|
name: '', |
||||||
|
description: '', |
||||||
|
folderList: folderList, |
||||||
|
spinnerLoading: false |
||||||
|
} |
||||||
|
}, |
||||||
|
props: {}, |
||||||
|
methods: { |
||||||
|
...mapActions('resource', ['createResourceFolder']), |
||||||
|
ok () { |
||||||
|
if (this._validation()) { |
||||||
|
this.spinnerLoading = true |
||||||
|
this.createResourceFolder({ |
||||||
|
type: 'UDF', |
||||||
|
name: this.name, |
||||||
|
currentDir: '/', |
||||||
|
pid: -1, |
||||||
|
description: this.description |
||||||
|
}).then(res => { |
||||||
|
this.$message.success(res.msg) |
||||||
|
setTimeout(() => { |
||||||
|
this.spinnerLoading = false |
||||||
|
this.$router.push({ path: `/resource/udf/resource`}) |
||||||
|
}, 800) |
||||||
|
}).catch(e => { |
||||||
|
this.$message.error(e.msg || '') |
||||||
|
this.spinnerLoading = false |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
_validation () { |
||||||
|
if (!this.name) { |
||||||
|
this.$message.warning(`${i18n.$t('Please enter resource folder name')}`) |
||||||
|
return false |
||||||
|
} |
||||||
|
|
||||||
|
return true |
||||||
|
}, |
||||||
|
}, |
||||||
|
watch: {}, |
||||||
|
created () { |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
this.$modal.destroy() |
||||||
|
}, |
||||||
|
destroyed () { |
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
components: { mListConstruction, mConditions, mSpin, mListBoxF } |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" rel="stylesheet/scss"> |
||||||
|
.resource-create-model { |
||||||
|
padding: 30px; |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,196 @@ |
|||||||
|
/* |
||||||
|
* 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. |
||||||
|
*/ |
||||||
|
<template> |
||||||
|
<m-list-construction :title="$t('Create File')"> |
||||||
|
<template slot="content"> |
||||||
|
<div class="resource-create-model"> |
||||||
|
<m-list-box-f> |
||||||
|
<template slot="name"><strong>*</strong>{{$t('File Name')}}</template> |
||||||
|
<template slot="content"> |
||||||
|
<x-input |
||||||
|
type="input" |
||||||
|
v-model="fileName" |
||||||
|
maxlength="60" |
||||||
|
style="width: 300px;" |
||||||
|
:placeholder="$t('Please enter name')" |
||||||
|
autocomplete="off"> |
||||||
|
</x-input> |
||||||
|
</template> |
||||||
|
</m-list-box-f> |
||||||
|
<m-list-box-f> |
||||||
|
<template slot="name"><strong>*</strong>{{$t('File Format')}}</template> |
||||||
|
<template slot="content"> |
||||||
|
<x-select v-model="suffix" style="width: 100px;" @on-change="_onChange"> |
||||||
|
<x-option |
||||||
|
v-for="city in fileTypeList" |
||||||
|
:key="city" |
||||||
|
:value="city" |
||||||
|
:label="city"> |
||||||
|
</x-option> |
||||||
|
</x-select> |
||||||
|
</template> |
||||||
|
</m-list-box-f> |
||||||
|
<m-list-box-f> |
||||||
|
<template slot="name">{{$t('Description')}}</template> |
||||||
|
<template slot="content"> |
||||||
|
<x-input |
||||||
|
type="textarea" |
||||||
|
v-model="description" |
||||||
|
style="width: 430px;" |
||||||
|
:placeholder="$t('Please enter description')" |
||||||
|
autocomplete="off"> |
||||||
|
</x-input> |
||||||
|
</template> |
||||||
|
</m-list-box-f> |
||||||
|
<m-list-box-f> |
||||||
|
<template slot="name"><strong>*</strong>{{$t('File Content')}}</template> |
||||||
|
<template slot="content"> |
||||||
|
<textarea id="code-create-mirror" name="code-create-mirror"></textarea> |
||||||
|
</template> |
||||||
|
</m-list-box-f> |
||||||
|
<m-list-box-f> |
||||||
|
<template slot="name"> </template> |
||||||
|
<template slot="content"> |
||||||
|
<div class="submit"> |
||||||
|
<x-button type="primary" shape="circle" :loading="spinnerLoading" @click="ok()">{{spinnerLoading ? 'Loading...' : $t('Create')}} </x-button> |
||||||
|
<x-button type="text" @click="() => $router.push({name: 'file'})"> {{$t('Cancel')}} </x-button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</m-list-box-f> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</m-list-construction> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import i18n from '@/module/i18n' |
||||||
|
import { mapActions } from 'vuex' |
||||||
|
import { filtTypeArr } from '../_source/common' |
||||||
|
import { handlerSuffix } from '../details/_source/utils' |
||||||
|
import codemirror from '../_source/codemirror' |
||||||
|
import mListBoxF from '@/module/components/listBoxF/listBoxF' |
||||||
|
import mSpin from '@/module/components/spin/spin' |
||||||
|
import mConditions from '@/module/components/conditions/conditions' |
||||||
|
import localStore from '@/module/util/localStorage' |
||||||
|
import mListConstruction from '@/module/components/listConstruction/listConstruction' |
||||||
|
|
||||||
|
let editor |
||||||
|
export default { |
||||||
|
name: 'resource-list-create-FILE', |
||||||
|
data () { |
||||||
|
return { |
||||||
|
suffix: 'sh', |
||||||
|
fileName: '', |
||||||
|
description: '', |
||||||
|
fileTypeList: filtTypeArr, |
||||||
|
content: '', |
||||||
|
pid: -1, |
||||||
|
currentDir: '/', |
||||||
|
spinnerLoading: false |
||||||
|
} |
||||||
|
}, |
||||||
|
props: {}, |
||||||
|
methods: { |
||||||
|
...mapActions('resource', ['createResourceFile']), |
||||||
|
ok () { |
||||||
|
if (this._validation()) { |
||||||
|
this.spinnerLoading = true |
||||||
|
this.createResourceFile({ |
||||||
|
type: 'FILE', |
||||||
|
pid: this.$route.params.id, |
||||||
|
currentDir: localStore.getItem('currentDir'), |
||||||
|
fileName: this.fileName, |
||||||
|
suffix: this.suffix, |
||||||
|
description: this.description, |
||||||
|
content: editor.getValue() |
||||||
|
}).then(res => { |
||||||
|
this.$message.success(res.msg) |
||||||
|
setTimeout(() => { |
||||||
|
this.spinnerLoading = false |
||||||
|
this.$router.push({ path: `/resource/file/subdirectory/${this.$route.params.id}`}) |
||||||
|
}, 800) |
||||||
|
}).catch(e => { |
||||||
|
this.$message.error(e.msg || '') |
||||||
|
this.spinnerLoading = false |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
_validation () { |
||||||
|
if (!this.fileName) { |
||||||
|
this.$message.warning(`${i18n.$t('Please enter resource name')}`) |
||||||
|
return false |
||||||
|
} |
||||||
|
if (!editor.getValue()) { |
||||||
|
this.$message.warning(`${i18n.$t('Please enter the resource content')}`) |
||||||
|
return false |
||||||
|
} |
||||||
|
if (editor.doc.size>3000) { |
||||||
|
this.$message.warning(`${i18n.$t('Resource content cannot exceed 3000 lines')}`) |
||||||
|
return false |
||||||
|
} |
||||||
|
|
||||||
|
return true |
||||||
|
}, |
||||||
|
/** |
||||||
|
* Processing code highlighting |
||||||
|
*/ |
||||||
|
_handlerEditor () { |
||||||
|
// editor |
||||||
|
editor = codemirror('code-create-mirror', { |
||||||
|
mode: 'shell', |
||||||
|
readOnly: false |
||||||
|
}) |
||||||
|
|
||||||
|
this.keypress = () => { |
||||||
|
if (!editor.getOption('readOnly')) { |
||||||
|
editor.showHint({ |
||||||
|
completeSingle: false |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Monitor keyboard |
||||||
|
editor.on('keypress', this.keypress) |
||||||
|
}, |
||||||
|
_onChange (val) { |
||||||
|
editor.setOption('mode', handlerSuffix['.' + val.label]) |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: {}, |
||||||
|
created () { |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
this.$modal.destroy() |
||||||
|
this._handlerEditor() |
||||||
|
}, |
||||||
|
destroyed () { |
||||||
|
editor.toTextArea() // uninstall |
||||||
|
editor.off($('.code-create-mirror'), 'keypress', this.keypress) |
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
components: { mListConstruction, mConditions, mSpin, mListBoxF } |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" rel="stylesheet/scss"> |
||||||
|
.resource-create-model { |
||||||
|
padding: 30px; |
||||||
|
} |
||||||
|
.CodeMirror { |
||||||
|
border:1px solid #DDDEDD; |
||||||
|
border-radius: 3px; |
||||||
|
} |
||||||
|
</style> |
@ -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. |
||||||
|
*/ |
||||||
|
<template> |
||||||
|
<m-list-construction :title="$t('Create folder')"> |
||||||
|
<template slot="content"> |
||||||
|
<div class="resource-create-model"> |
||||||
|
<m-list-box-f> |
||||||
|
<template slot="name"><strong>*</strong>{{$t('Folder Name')}}</template> |
||||||
|
<template slot="content"> |
||||||
|
<x-input |
||||||
|
type="input" |
||||||
|
v-model="name" |
||||||
|
maxlength="60" |
||||||
|
style="width: 300px;" |
||||||
|
:placeholder="$t('Please enter name')" |
||||||
|
autocomplete="off"> |
||||||
|
</x-input> |
||||||
|
</template> |
||||||
|
</m-list-box-f> |
||||||
|
<!-- <m-list-box-f> |
||||||
|
<template slot="name"><strong>*</strong>{{$t('Folder Format')}}</template> |
||||||
|
<template slot="content"> |
||||||
|
<x-select v-model="type" style="width: 100px;"> |
||||||
|
<x-option |
||||||
|
v-for="item in folderList" |
||||||
|
:key="item.value" |
||||||
|
:value="item.value" |
||||||
|
:label="item.label"> |
||||||
|
</x-option> |
||||||
|
</x-select> |
||||||
|
</template> |
||||||
|
</m-list-box-f> --> |
||||||
|
<m-list-box-f> |
||||||
|
<template slot="name">{{$t('Description')}}</template> |
||||||
|
<template slot="content"> |
||||||
|
<x-input |
||||||
|
type="textarea" |
||||||
|
v-model="description" |
||||||
|
style="width: 430px;" |
||||||
|
:placeholder="$t('Please enter description')" |
||||||
|
autocomplete="off"> |
||||||
|
</x-input> |
||||||
|
</template> |
||||||
|
</m-list-box-f> |
||||||
|
<m-list-box-f> |
||||||
|
<template slot="name"> </template> |
||||||
|
<template slot="content"> |
||||||
|
<div class="submit"> |
||||||
|
<x-button type="primary" shape="circle" :loading="spinnerLoading" @click="ok()">{{spinnerLoading ? 'Loading...' : $t('Create')}} </x-button> |
||||||
|
<x-button type="text" @click="() => $router.push({name: 'file'})"> {{$t('Cancel')}} </x-button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</m-list-box-f> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</m-list-construction> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import i18n from '@/module/i18n' |
||||||
|
import { mapActions } from 'vuex' |
||||||
|
import { folderList } from '../_source/common' |
||||||
|
import { handlerSuffix } from '../details/_source/utils' |
||||||
|
import mListBoxF from '@/module/components/listBoxF/listBoxF' |
||||||
|
import mSpin from '@/module/components/spin/spin' |
||||||
|
import mConditions from '@/module/components/conditions/conditions' |
||||||
|
import localStore from '@/module/util/localStorage' |
||||||
|
import mListConstruction from '@/module/components/listConstruction/listConstruction' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'resource-list-create-FILE', |
||||||
|
data () { |
||||||
|
return { |
||||||
|
type: '', |
||||||
|
name: '', |
||||||
|
description: '', |
||||||
|
folderList: folderList, |
||||||
|
spinnerLoading: false |
||||||
|
} |
||||||
|
}, |
||||||
|
props: {}, |
||||||
|
methods: { |
||||||
|
...mapActions('resource', ['createResourceFolder']), |
||||||
|
ok () { |
||||||
|
if (this._validation()) { |
||||||
|
this.spinnerLoading = true |
||||||
|
this.createResourceFolder({ |
||||||
|
type: 'FILE', |
||||||
|
name: this.name, |
||||||
|
currentDir: localStore.getItem('currentDir'), |
||||||
|
pid: this.$route.params.id, |
||||||
|
description: this.description |
||||||
|
}).then(res => { |
||||||
|
this.$message.success(res.msg) |
||||||
|
setTimeout(() => { |
||||||
|
this.spinnerLoading = false |
||||||
|
this.$router.push({ path: `/resource/file/subdirectory/${this.$route.params.id}`}) |
||||||
|
}, 800) |
||||||
|
}).catch(e => { |
||||||
|
this.$message.error(e.msg || '') |
||||||
|
this.spinnerLoading = false |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
_validation () { |
||||||
|
if (!this.name) { |
||||||
|
this.$message.warning(`${i18n.$t('Please enter resource folder name')}`) |
||||||
|
return false |
||||||
|
} |
||||||
|
|
||||||
|
return true |
||||||
|
}, |
||||||
|
}, |
||||||
|
watch: {}, |
||||||
|
created () { |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
this.$modal.destroy() |
||||||
|
}, |
||||||
|
destroyed () { |
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
components: { mListConstruction, mConditions, mSpin, mListBoxF } |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" rel="stylesheet/scss"> |
||||||
|
.resource-create-model { |
||||||
|
padding: 30px; |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,251 @@ |
|||||||
|
/* |
||||||
|
* 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. |
||||||
|
*/ |
||||||
|
<template> |
||||||
|
<div class="list-model"> |
||||||
|
<div class="table-box"> |
||||||
|
<table class="fixed"> |
||||||
|
<tr> |
||||||
|
<th scope="col"> |
||||||
|
<span>{{$t('#')}}</span> |
||||||
|
</th> |
||||||
|
<th scope="col"> |
||||||
|
<span>{{$t('Name')}}</span> |
||||||
|
</th> |
||||||
|
<th scope="col"> |
||||||
|
<span>{{$t('Whether directory')}}</span> |
||||||
|
</th> |
||||||
|
<th scope="col"> |
||||||
|
<span>{{$t('File Name')}}</span> |
||||||
|
</th> |
||||||
|
<th scope="col"> |
||||||
|
<span>{{$t('Description')}}</span> |
||||||
|
</th> |
||||||
|
<th scope="col" width="100"> |
||||||
|
<span>{{$t('Size')}}</span> |
||||||
|
</th> |
||||||
|
<th scope="col" width="140"> |
||||||
|
<span>{{$t('Update Time')}}</span> |
||||||
|
</th> |
||||||
|
<th scope="col" width="140"> |
||||||
|
<span>{{$t('Operation')}}</span> |
||||||
|
</th> |
||||||
|
</tr> |
||||||
|
<tr v-for="(item, $index) in list" :key="item.id"> |
||||||
|
<td> |
||||||
|
<span>{{parseInt(pageNo === 1 ? ($index + 1) : (($index + 1) + (pageSize * (pageNo - 1))))}}</span> |
||||||
|
</td> |
||||||
|
<td> |
||||||
|
<span class="ellipsis" v-tooltip.large.top.start.light="{text: item.alias, maxWidth: '500px'}"> |
||||||
|
<a href="javascript:" class="links" @click="_go(item)">{{item.alias}}</a> |
||||||
|
</span> |
||||||
|
</td> |
||||||
|
<td> |
||||||
|
<span>{{item.directory? $t('Yes') : $t('No')}}</span> |
||||||
|
</td> |
||||||
|
<td><span class="ellipsis" v-tooltip.large.top.start.light="{text: item.fileName, maxWidth: '500px'}">{{item.fileName}}</span></td> |
||||||
|
<td> |
||||||
|
<span v-if="item.description" class="ellipsis" v-tooltip.large.top.start.light="{text: item.description, maxWidth: '500px'}">{{item.description}}</span> |
||||||
|
<span v-else>-</span> |
||||||
|
</td> |
||||||
|
<td> |
||||||
|
<span>{{_rtSize(item.size)}}</span> |
||||||
|
</td> |
||||||
|
<td> |
||||||
|
<span v-if="item.updateTime">{{item.updateTime | formatDate}}</span> |
||||||
|
<span v-else>-</span> |
||||||
|
</td> |
||||||
|
<td> |
||||||
|
<x-button |
||||||
|
type="info" |
||||||
|
shape="circle" |
||||||
|
size="xsmall" |
||||||
|
data-toggle="tooltip" |
||||||
|
:title="$t('Edit')" |
||||||
|
:disabled="_rtDisb(item)" |
||||||
|
@click="_edit(item,$index)" |
||||||
|
icon="ans-icon-edit"> |
||||||
|
</x-button> |
||||||
|
<x-button |
||||||
|
type="info" |
||||||
|
shape="circle" |
||||||
|
size="xsmall" |
||||||
|
icon="ans-icon-play" |
||||||
|
data-toggle="tooltip" |
||||||
|
:title="$t('Rename')" |
||||||
|
@click="_rename(item,$index)"> |
||||||
|
</x-button> |
||||||
|
|
||||||
|
<x-button |
||||||
|
type="info" |
||||||
|
shape="circle" |
||||||
|
size="xsmall" |
||||||
|
data-toggle="tooltip" |
||||||
|
:title="$t('Download')" |
||||||
|
:disabled="item.directory? true: false" |
||||||
|
@click="_downloadFile(item)" |
||||||
|
icon="ans-icon-download"> |
||||||
|
</x-button> |
||||||
|
|
||||||
|
<x-poptip |
||||||
|
:ref="'poptip-' + $index" |
||||||
|
placement="bottom-end" |
||||||
|
width="90"> |
||||||
|
<p>{{$t('Delete?')}}</p> |
||||||
|
<div style="text-align: right; margin: 0;padding-top: 4px;"> |
||||||
|
<x-button type="text" size="xsmall" shape="circle" @click="_closeDelete($index)">{{$t('Cancel')}}</x-button> |
||||||
|
<x-button type="primary" size="xsmall" shape="circle" @click="_delete(item,$index)">{{$t('Confirm')}}</x-button> |
||||||
|
</div> |
||||||
|
<template slot="reference"> |
||||||
|
<x-button |
||||||
|
icon="ans-icon-trash" |
||||||
|
type="error" |
||||||
|
shape="circle" |
||||||
|
size="xsmall" |
||||||
|
data-toggle="tooltip" |
||||||
|
:title="$t('delete')"> |
||||||
|
</x-button> |
||||||
|
</template> |
||||||
|
</x-poptip> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import _ from 'lodash' |
||||||
|
import mRename from './rename' |
||||||
|
import { mapActions } from 'vuex' |
||||||
|
import { filtTypeArr } from '../../_source/common' |
||||||
|
import { bytesToSize } from '@/module/util/util' |
||||||
|
import { downloadFile } from '@/module/download' |
||||||
|
import localStore from '@/module/util/localStorage' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'file-manage-list', |
||||||
|
data () { |
||||||
|
return { |
||||||
|
list: [] |
||||||
|
} |
||||||
|
}, |
||||||
|
props: { |
||||||
|
fileResourcesList: Array, |
||||||
|
pageNo: Number, |
||||||
|
pageSize: Number |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
...mapActions('resource', ['deleteResource']), |
||||||
|
_edit (item) { |
||||||
|
localStore.setItem('file', `${item.alias}|${item.size}`) |
||||||
|
this.$router.push({ path: `/resource/file/edit/${item.id}` }) |
||||||
|
}, |
||||||
|
_go (item) { |
||||||
|
localStore.setItem('file', `${item.alias}|${item.size}`) |
||||||
|
if(item.directory) { |
||||||
|
localStore.setItem('currentDir', `${item.fullName}`) |
||||||
|
this.$router.push({ path: `/resource/file/subdirectory/${item.id}` }) |
||||||
|
} else { |
||||||
|
this.$router.push({ path: `/resource/file/list/${item.id}` }) |
||||||
|
} |
||||||
|
}, |
||||||
|
_downloadFile (item) { |
||||||
|
downloadFile('/dolphinscheduler/resources/download', { |
||||||
|
id: item.id |
||||||
|
}) |
||||||
|
}, |
||||||
|
_rtSize (val) { |
||||||
|
return bytesToSize(parseInt(val)) |
||||||
|
}, |
||||||
|
_closeDelete (i) { |
||||||
|
this.$refs[`poptip-${i}`][0].doClose() |
||||||
|
}, |
||||||
|
_delete (item, i) { |
||||||
|
this.deleteResource({ |
||||||
|
id: item.id |
||||||
|
}).then(res => { |
||||||
|
this.$refs[`poptip-${i}`][0].doClose() |
||||||
|
this.$emit('on-update') |
||||||
|
this.$message.success(res.msg) |
||||||
|
}).catch(e => { |
||||||
|
this.$refs[`poptip-${i}`][0].doClose() |
||||||
|
this.$message.error(e.msg || '') |
||||||
|
}) |
||||||
|
}, |
||||||
|
_rename (item, i) { |
||||||
|
let self = this |
||||||
|
let modal = this.$modal.dialog({ |
||||||
|
closable: false, |
||||||
|
showMask: true, |
||||||
|
escClose: true, |
||||||
|
className: 'v-modal-custom', |
||||||
|
transitionName: 'opacityp', |
||||||
|
render (h) { |
||||||
|
return h(mRename, { |
||||||
|
on: { |
||||||
|
onUpDate (item) { |
||||||
|
self.$set(self.list, i, item) |
||||||
|
modal.remove() |
||||||
|
}, |
||||||
|
close () { |
||||||
|
modal.remove() |
||||||
|
} |
||||||
|
}, |
||||||
|
props: { |
||||||
|
item: item |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
_rtDisb ({ alias, size }) { |
||||||
|
let i = alias.lastIndexOf('.') |
||||||
|
let a = alias.substring(i, alias.length) |
||||||
|
let flag = _.includes(filtTypeArr, _.trimStart(a, '.')) |
||||||
|
if (flag && (size < 1000000)) { |
||||||
|
flag = true |
||||||
|
} else { |
||||||
|
flag = false |
||||||
|
} |
||||||
|
return !flag |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
fileResourcesList (a) { |
||||||
|
this.list = [] |
||||||
|
setTimeout(() => { |
||||||
|
this.list = a |
||||||
|
}) |
||||||
|
}, |
||||||
|
// Listening for routing changes |
||||||
|
// '$route': { |
||||||
|
// deep: false, |
||||||
|
// handler () { |
||||||
|
// this.$emit('on-update',this.$route.params.id) |
||||||
|
// } |
||||||
|
// } |
||||||
|
}, |
||||||
|
beforeRouteUpdate (to, from, next) { |
||||||
|
next() // 一定要有next |
||||||
|
}, |
||||||
|
created () { |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
this.list = this.fileResourcesList |
||||||
|
}, |
||||||
|
components: { } |
||||||
|
} |
||||||
|
</script> |
@ -0,0 +1,120 @@ |
|||||||
|
/* |
||||||
|
* 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. |
||||||
|
*/ |
||||||
|
<template> |
||||||
|
<m-popup :ok-text="$t('Rename')" :nameText="$t('Rename')" @ok="_ok" :asyn-loading="true"> |
||||||
|
<template slot="content"> |
||||||
|
<div class="resource-rename-model"> |
||||||
|
<m-list-box-f> |
||||||
|
<template slot="name"><strong>*</strong>{{$t('Name')}}</template> |
||||||
|
<template slot="content"> |
||||||
|
<x-input |
||||||
|
type="input" |
||||||
|
v-model="name" |
||||||
|
:placeholder="$t('Please enter name')" |
||||||
|
autocomplete="off"> |
||||||
|
</x-input> |
||||||
|
</template> |
||||||
|
</m-list-box-f> |
||||||
|
<m-list-box-f> |
||||||
|
<template slot="name">{{$t('Description')}}</template> |
||||||
|
<template slot="content"> |
||||||
|
<x-input |
||||||
|
type="textarea" |
||||||
|
v-model="description" |
||||||
|
:placeholder="$t('Please enter description')" |
||||||
|
autocomplete="off"> |
||||||
|
</x-input> |
||||||
|
</template> |
||||||
|
</m-list-box-f> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</m-popup> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import i18n from '@/module/i18n' |
||||||
|
import store from '@/conf/home/store' |
||||||
|
import localStore from '@/module/util/localStorage' |
||||||
|
import mPopup from '@/module/components/popup/popup' |
||||||
|
import mListBoxF from '@/module/components/listBoxF/listBoxF' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'resource-file-rename', |
||||||
|
data () { |
||||||
|
return { |
||||||
|
store, |
||||||
|
description: '', |
||||||
|
name: '' |
||||||
|
} |
||||||
|
}, |
||||||
|
props: { |
||||||
|
item: Object |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
_ok (fn) { |
||||||
|
this._verification().then(res => { |
||||||
|
if (this.name === this.item.alias) { |
||||||
|
return new Promise((resolve,reject) => { |
||||||
|
this.description === this.item.description ? reject({msg:'内容未修改'}) : resolve() |
||||||
|
}) |
||||||
|
}else{ |
||||||
|
return this.store.dispatch('resource/resourceVerifyName', { |
||||||
|
fullName: localStore.getItem('currentDir')+'/'+this.name, |
||||||
|
type: 'FILE' |
||||||
|
}) |
||||||
|
} |
||||||
|
}).then(res => { |
||||||
|
return this.store.dispatch('resource/resourceRename', { |
||||||
|
name: this.name, |
||||||
|
description: this.description, |
||||||
|
id: this.item.id, |
||||||
|
type: 'FILE' |
||||||
|
}) |
||||||
|
}).then(res => { |
||||||
|
this.$message.success(res.msg) |
||||||
|
this.$emit('onUpDate', res.data) |
||||||
|
fn() |
||||||
|
}).catch(e => { |
||||||
|
fn() |
||||||
|
this.$message.error(e.msg || '') |
||||||
|
}) |
||||||
|
}, |
||||||
|
_verification () { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
if (!this.name) { |
||||||
|
reject({ // eslint-disable-line |
||||||
|
msg: `${i18n.$t('Please enter resource name')}` |
||||||
|
}) |
||||||
|
} else { |
||||||
|
resolve() |
||||||
|
} |
||||||
|
|
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: {}, |
||||||
|
created () { |
||||||
|
let item = this.item || {} |
||||||
|
if (item) { |
||||||
|
this.name = item.alias |
||||||
|
this.description = item.description |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
}, |
||||||
|
components: { mPopup, mListBoxF } |
||||||
|
} |
||||||
|
</script> |
@ -0,0 +1,173 @@ |
|||||||
|
/* |
||||||
|
* 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. |
||||||
|
*/ |
||||||
|
<template> |
||||||
|
<div class="home-main list-construction-model"> |
||||||
|
<div class="content-title"> |
||||||
|
<a class="bread" style="padding-left: 15px;" @click="() => $router.push({path: `/resource/file`})">{{$t('File Manage')}}</a> |
||||||
|
<a class="bread" v-for="(item,$index) in breadList" :key="$index" @click="_ckOperation($index)">{{'>'+item}}</a> |
||||||
|
</div> |
||||||
|
<div class="conditions-box"> |
||||||
|
<m-conditions @on-conditions="_onConditions"> |
||||||
|
<template slot="button-group"> |
||||||
|
<x-button-group size="small" > |
||||||
|
<x-button type="ghost" @click="() => $router.push({path: `/resource/file/subFileFolder/${searchParams.id}`})">{{$t('Create folder')}}</x-button> |
||||||
|
<x-button type="ghost" @click="() => $router.push({path: `/resource/file/subFile/${searchParams.id}`})">{{$t('Create File')}}</x-button> |
||||||
|
<x-button type="ghost" @click="_uploading">{{$t('Upload Files')}}</x-button> |
||||||
|
</x-button-group> |
||||||
|
</template> |
||||||
|
</m-conditions> |
||||||
|
</div> |
||||||
|
<div class="list-box"> |
||||||
|
<template v-if="fileResourcesList.length || total>0"> |
||||||
|
<m-list @on-update="_onUpdate" @on-updateList="_updateList" :file-resources-list="fileResourcesList" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize"> |
||||||
|
</m-list> |
||||||
|
<div class="page-box"> |
||||||
|
<x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<template v-if="!fileResourcesList.length && total<=0"> |
||||||
|
<m-no-data></m-no-data> |
||||||
|
</template> |
||||||
|
<m-spin :is-spin="isLoading"> |
||||||
|
</m-spin> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import _ from 'lodash' |
||||||
|
import { mapActions } from 'vuex' |
||||||
|
import mList from './_source/list' |
||||||
|
import localStore from '@/module/util/localStorage' |
||||||
|
import mSpin from '@/module/components/spin/spin' |
||||||
|
import { findComponentDownward } from '@/module/util/' |
||||||
|
import mNoData from '@/module/components/noData/noData' |
||||||
|
import listUrlParamHandle from '@/module/mixin/listUrlParamHandle' |
||||||
|
import mConditions from '@/module/components/conditions/conditions' |
||||||
|
import mListConstruction from '@/module/components/listConstruction/listConstruction' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'resource-list-index-FILE', |
||||||
|
data () { |
||||||
|
return { |
||||||
|
total: null, |
||||||
|
isLoading: false, |
||||||
|
fileResourcesList: [], |
||||||
|
searchParams: { |
||||||
|
id: this.$route.params.id, |
||||||
|
pageSize: 10, |
||||||
|
pageNo: 1, |
||||||
|
searchVal: '', |
||||||
|
type: 'FILE' |
||||||
|
}, |
||||||
|
breadList: [] |
||||||
|
} |
||||||
|
}, |
||||||
|
mixins: [listUrlParamHandle], |
||||||
|
props: {}, |
||||||
|
methods: { |
||||||
|
...mapActions('resource', ['getResourcesListP','getResourceId']), |
||||||
|
/** |
||||||
|
* File Upload |
||||||
|
*/ |
||||||
|
_uploading () { |
||||||
|
findComponentDownward(this.$root, 'roof-nav')._fileChildUpdate('FILE',this.searchParams.id) |
||||||
|
}, |
||||||
|
_onConditions (o) { |
||||||
|
this.searchParams = _.assign(this.searchParams, o) |
||||||
|
this.searchParams.pageNo = 1 |
||||||
|
}, |
||||||
|
_page (val) { |
||||||
|
this.searchParams.pageNo = val |
||||||
|
}, |
||||||
|
_pageSize (val) { |
||||||
|
this.searchParams.pageSize = val |
||||||
|
}, |
||||||
|
_getList (flag) { |
||||||
|
this.isLoading = !flag |
||||||
|
this.getResourcesListP(this.searchParams).then(res => { |
||||||
|
if(this.searchParams.pageNo>1 && res.totalList.length == 0) { |
||||||
|
this.searchParams.pageNo = this.searchParams.pageNo -1 |
||||||
|
} else { |
||||||
|
this.fileResourcesList = res.totalList |
||||||
|
this.total = res.total |
||||||
|
this.isLoading = false |
||||||
|
} |
||||||
|
}).catch(e => { |
||||||
|
this.isLoading = false |
||||||
|
}) |
||||||
|
}, |
||||||
|
_updateList (data) { |
||||||
|
this.searchParams.id = data |
||||||
|
this.searchParams.pageNo = 1 |
||||||
|
this.searchParams.searchVal = '' |
||||||
|
this._debounceGET() |
||||||
|
}, |
||||||
|
_onUpdate () { |
||||||
|
this.searchParams.id = this.$route.params.id |
||||||
|
this._debounceGET() |
||||||
|
}, |
||||||
|
_ckOperation(index) { |
||||||
|
let breadName ='' |
||||||
|
this.breadList.forEach((item, i) => { |
||||||
|
if(i<=index) { |
||||||
|
breadName = breadName+'/'+item |
||||||
|
} |
||||||
|
}) |
||||||
|
this.transferApi(breadName) |
||||||
|
}, |
||||||
|
transferApi(api) { |
||||||
|
this.getResourceId({ |
||||||
|
type: 'FILE', |
||||||
|
fullName: api |
||||||
|
}).then(res => { |
||||||
|
localStore.setItem('currentDir', `${res.fullName}`) |
||||||
|
this.$router.push({ path: `/resource/file/subdirectory/${res.id}` }) |
||||||
|
}).catch(e => { |
||||||
|
this.$message.error(e.msg || '') |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
// router |
||||||
|
'$route' (a) { |
||||||
|
// url no params get instance list |
||||||
|
this.searchParams.pageNo = _.isEmpty(a.query) ? 1 : a.query.pageNo |
||||||
|
this.searchParams.id = a.params.id |
||||||
|
let dir = localStore.getItem('currentDir').split('/') |
||||||
|
dir.shift() |
||||||
|
this.breadList = dir |
||||||
|
} |
||||||
|
}, |
||||||
|
created () {}, |
||||||
|
mounted () { |
||||||
|
let dir = localStore.getItem('currentDir').split('/') |
||||||
|
dir.shift() |
||||||
|
this.breadList = dir |
||||||
|
this.$modal.destroy() |
||||||
|
}, |
||||||
|
components: { mListConstruction, mConditions, mList, mSpin, mNoData } |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style lang="scss" rel="stylesheet/scss"> |
||||||
|
.bread { |
||||||
|
font-size: 22px; |
||||||
|
padding-top: 10px; |
||||||
|
color: #2a455b; |
||||||
|
display: inline-block; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,128 @@ |
|||||||
|
/* |
||||||
|
* 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. |
||||||
|
*/ |
||||||
|
<template> |
||||||
|
<m-list-construction :title="$t('Create folder')"> |
||||||
|
<template slot="content"> |
||||||
|
<div class="resource-create-model"> |
||||||
|
<m-list-box-f> |
||||||
|
<template slot="name"><strong>*</strong>{{$t('Folder Name')}}</template> |
||||||
|
<template slot="content"> |
||||||
|
<x-input |
||||||
|
type="input" |
||||||
|
v-model="name" |
||||||
|
maxlength="60" |
||||||
|
style="width: 300px;" |
||||||
|
:placeholder="$t('Please enter name')" |
||||||
|
autocomplete="off"> |
||||||
|
</x-input> |
||||||
|
</template> |
||||||
|
</m-list-box-f> |
||||||
|
<m-list-box-f> |
||||||
|
<template slot="name">{{$t('Description')}}</template> |
||||||
|
<template slot="content"> |
||||||
|
<x-input |
||||||
|
type="textarea" |
||||||
|
v-model="description" |
||||||
|
style="width: 430px;" |
||||||
|
:placeholder="$t('Please enter description')" |
||||||
|
autocomplete="off"> |
||||||
|
</x-input> |
||||||
|
</template> |
||||||
|
</m-list-box-f> |
||||||
|
<m-list-box-f> |
||||||
|
<template slot="name"> </template> |
||||||
|
<template slot="content"> |
||||||
|
<div class="submit"> |
||||||
|
<x-button type="primary" shape="circle" :loading="spinnerLoading" @click="ok()">{{spinnerLoading ? 'Loading...' : $t('Create')}} </x-button> |
||||||
|
<x-button type="text" @click="() => $router.push({name: 'resource-udf'})"> {{$t('Cancel')}} </x-button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</m-list-box-f> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</m-list-construction> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import i18n from '@/module/i18n' |
||||||
|
import { mapActions } from 'vuex' |
||||||
|
import mListBoxF from '@/module/components/listBoxF/listBoxF' |
||||||
|
import mSpin from '@/module/components/spin/spin' |
||||||
|
import mConditions from '@/module/components/conditions/conditions' |
||||||
|
import localStore from '@/module/util/localStorage' |
||||||
|
import mListConstruction from '@/module/components/listConstruction/listConstruction' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'resource-list-create-udf', |
||||||
|
data () { |
||||||
|
return { |
||||||
|
type: '', |
||||||
|
name: '', |
||||||
|
description: '', |
||||||
|
spinnerLoading: false |
||||||
|
} |
||||||
|
}, |
||||||
|
props: {}, |
||||||
|
methods: { |
||||||
|
...mapActions('resource', ['createResourceFolder']), |
||||||
|
ok () { |
||||||
|
if (this._validation()) { |
||||||
|
this.spinnerLoading = true |
||||||
|
this.createResourceFolder({ |
||||||
|
type: 'UDF', |
||||||
|
name: this.name, |
||||||
|
currentDir: '/', |
||||||
|
pid: -1, |
||||||
|
description: this.description |
||||||
|
}).then(res => { |
||||||
|
this.$message.success(res.msg) |
||||||
|
setTimeout(() => { |
||||||
|
this.spinnerLoading = false |
||||||
|
this.$router.push({ path: `/resource/udf`}) |
||||||
|
}, 800) |
||||||
|
}).catch(e => { |
||||||
|
this.$message.error(e.msg || '') |
||||||
|
this.spinnerLoading = false |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
_validation () { |
||||||
|
if (!this.name) { |
||||||
|
this.$message.warning(`${i18n.$t('Please enter resource folder name')}`) |
||||||
|
return false |
||||||
|
} |
||||||
|
|
||||||
|
return true |
||||||
|
}, |
||||||
|
}, |
||||||
|
watch: {}, |
||||||
|
created () { |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
this.$modal.destroy() |
||||||
|
}, |
||||||
|
destroyed () { |
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
components: { mListConstruction, mConditions, mSpin, mListBoxF } |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" rel="stylesheet/scss"> |
||||||
|
.resource-create-model { |
||||||
|
padding: 30px; |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,218 @@ |
|||||||
|
/* |
||||||
|
* 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. |
||||||
|
*/ |
||||||
|
<template> |
||||||
|
<div class="list-model"> |
||||||
|
<div class="table-box"> |
||||||
|
<table class="fixed"> |
||||||
|
<tr> |
||||||
|
<th scope="col"> |
||||||
|
<span>{{$t('#')}}</span> |
||||||
|
</th> |
||||||
|
<th scope="col"> |
||||||
|
<span>{{$t('UDF Resource Name')}}</span> |
||||||
|
</th> |
||||||
|
<th scope="col"> |
||||||
|
<span>{{$t('Whether directory')}}</span> |
||||||
|
</th> |
||||||
|
<th scope="col"> |
||||||
|
<span>{{$t('File Name')}}</span> |
||||||
|
</th> |
||||||
|
<th scope="col" width="80"> |
||||||
|
<span>{{$t('File Size')}}</span> |
||||||
|
</th> |
||||||
|
<th scope="col"> |
||||||
|
<span>{{$t('Description')}}</span> |
||||||
|
</th> |
||||||
|
<th scope="col" width="140"> |
||||||
|
<span>{{$t('Create Time')}}</span> |
||||||
|
</th> |
||||||
|
<th scope="col" width="140"> |
||||||
|
<span>{{$t('Update Time')}}</span> |
||||||
|
</th> |
||||||
|
<th scope="col" width="110"> |
||||||
|
<span>{{$t('Operation')}}</span> |
||||||
|
</th> |
||||||
|
</tr> |
||||||
|
<tr v-for="(item, $index) in list" :key="$index"> |
||||||
|
<td> |
||||||
|
<span>{{parseInt(pageNo === 1 ? ($index + 1) : (($index + 1) + (pageSize * (pageNo - 1))))}}</span> |
||||||
|
</td> |
||||||
|
<td> |
||||||
|
<span class="ellipsis" v-tooltip.large.top.start.light="{text: item.alias, maxWidth: '500px'}"> |
||||||
|
<a href="javascript:" class="links" @click="_go(item)">{{item.alias}}</a> |
||||||
|
</span> |
||||||
|
</td> |
||||||
|
<td> |
||||||
|
<span>{{item.directory? $t('Yes') : $t('No')}}</span> |
||||||
|
</td> |
||||||
|
<td><span class="ellipsis" v-tooltip.large.top.start.light="{text: item.fileName, maxWidth: '500px'}">{{item.fileName}}</span></td> |
||||||
|
<td> |
||||||
|
<span>{{_rtSize(item.size)}}</span> |
||||||
|
</td> |
||||||
|
<td> |
||||||
|
<span v-if="item.description" class="ellipsis" v-tooltip.large.top.start.light="{text: item.description, maxWidth: '500px'}">{{item.description}}</span> |
||||||
|
<span v-else>-</span> |
||||||
|
</td> |
||||||
|
<td> |
||||||
|
<span v-if="item.createTime">{{item.createTime | formatDate}}</span> |
||||||
|
<span v-else>-</span> |
||||||
|
</td> |
||||||
|
<td> |
||||||
|
<span v-if="item.updateTime">{{item.updateTime | formatDate}}</span> |
||||||
|
<span v-else>-</span> |
||||||
|
</td> |
||||||
|
<td> |
||||||
|
<x-button |
||||||
|
type="info" |
||||||
|
shape="circle" |
||||||
|
size="xsmall" |
||||||
|
icon="ans-icon-play" |
||||||
|
data-toggle="tooltip" |
||||||
|
:title="$t('Rename')" |
||||||
|
@click="_rename(item,$index)"> |
||||||
|
</x-button> |
||||||
|
<x-button |
||||||
|
type="info" |
||||||
|
shape="circle" |
||||||
|
size="xsmall" |
||||||
|
data-toggle="tooltip" |
||||||
|
:title="$t('Download')" |
||||||
|
:disabled="item.directory? true: false" |
||||||
|
icon="ans-icon-download" |
||||||
|
@click="_downloadFile(item)"> |
||||||
|
</x-button> |
||||||
|
<x-poptip |
||||||
|
:ref="'poptip-' + $index" |
||||||
|
placement="bottom-end" |
||||||
|
width="90"> |
||||||
|
<p>{{$t('Delete?')}}</p> |
||||||
|
<div style="text-align: right; margin: 0;padding-top: 4px;"> |
||||||
|
<x-button type="text" size="xsmall" shape="circle" @click="_closeDelete($index)">{{$t('Cancel')}}</x-button> |
||||||
|
<x-button type="primary" size="xsmall" shape="circle" @click="_delete(item,$index)">{{$t('Confirm')}}</x-button> |
||||||
|
</div> |
||||||
|
<template slot="reference"> |
||||||
|
<x-button |
||||||
|
type="error" |
||||||
|
shape="circle" |
||||||
|
size="xsmall" |
||||||
|
data-toggle="tooltip" |
||||||
|
:title="$t('delete')" |
||||||
|
icon="ans-icon-trash"> |
||||||
|
</x-button> |
||||||
|
</template> |
||||||
|
</x-poptip> |
||||||
|
|
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import { mapActions } from 'vuex' |
||||||
|
import mRename from './rename' |
||||||
|
import { downloadFile } from '@/module/download' |
||||||
|
import { bytesToSize } from '@/module/util/util' |
||||||
|
import localStore from '@/module/util/localStorage' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'udf-manage-list', |
||||||
|
data () { |
||||||
|
return { |
||||||
|
list: [] |
||||||
|
} |
||||||
|
}, |
||||||
|
props: { |
||||||
|
udfResourcesList: Array, |
||||||
|
pageNo: Number, |
||||||
|
pageSize: Number |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
...mapActions('resource', ['deleteResource']), |
||||||
|
_downloadFile (item) { |
||||||
|
downloadFile('/dolphinscheduler/resources/download', { |
||||||
|
id: item.id |
||||||
|
}) |
||||||
|
}, |
||||||
|
_go (item) { |
||||||
|
localStore.setItem('file', `${item.alias}|${item.size}`) |
||||||
|
if(item.directory) { |
||||||
|
localStore.setItem('currentDir', `${item.fullName}`) |
||||||
|
this.$router.push({ path: `/resource/udf/subUdfDirectory/${item.id}` }) |
||||||
|
} |
||||||
|
}, |
||||||
|
_rtSize (val) { |
||||||
|
return bytesToSize(parseInt(val)) |
||||||
|
}, |
||||||
|
_closeDelete (i) { |
||||||
|
this.$refs[`poptip-${i}`][0].doClose() |
||||||
|
}, |
||||||
|
_delete (item, i) { |
||||||
|
this.deleteResource({ |
||||||
|
id: item.id |
||||||
|
}).then(res => { |
||||||
|
this.$refs[`poptip-${i}`][0].doClose() |
||||||
|
this.$emit('on-update') |
||||||
|
this.$message.success(res.msg) |
||||||
|
}).catch(e => { |
||||||
|
this.$refs[`poptip-${i}`][0].doClose() |
||||||
|
this.$message.error(e.msg || '') |
||||||
|
}) |
||||||
|
}, |
||||||
|
_rename (item, i) { |
||||||
|
let self = this |
||||||
|
let modal = this.$modal.dialog({ |
||||||
|
closable: false, |
||||||
|
showMask: true, |
||||||
|
escClose: true, |
||||||
|
className: 'v-modal-custom', |
||||||
|
transitionName: 'opacityp', |
||||||
|
render (h) { |
||||||
|
return h(mRename, { |
||||||
|
on: { |
||||||
|
onUpDate (item) { |
||||||
|
self.$set(self.list, i, item) |
||||||
|
modal.remove() |
||||||
|
}, |
||||||
|
close () { |
||||||
|
modal.remove() |
||||||
|
} |
||||||
|
}, |
||||||
|
props: { |
||||||
|
item: item |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
udfResourcesList (a) { |
||||||
|
this.list = [] |
||||||
|
setTimeout(() => { |
||||||
|
this.list = a |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
created () { |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
this.list = this.udfResourcesList |
||||||
|
}, |
||||||
|
components: { } |
||||||
|
} |
||||||
|
</script> |
@ -0,0 +1,120 @@ |
|||||||
|
/* |
||||||
|
* 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. |
||||||
|
*/ |
||||||
|
<template> |
||||||
|
<m-popup :ok-text="$t('Rename')" :nameText="$t('Rename')" @ok="_ok" :asyn-loading="true"> |
||||||
|
<template slot="content"> |
||||||
|
<div class="resource-rename-model"> |
||||||
|
<m-list-box-f> |
||||||
|
<template slot="name"><strong>*</strong>{{$t('Name')}}</template> |
||||||
|
<template slot="content"> |
||||||
|
<x-input |
||||||
|
type="input" |
||||||
|
v-model="name" |
||||||
|
maxlength="60" |
||||||
|
:placeholder="$t('Please enter name')" |
||||||
|
autocomplete="off"> |
||||||
|
</x-input> |
||||||
|
</template> |
||||||
|
</m-list-box-f> |
||||||
|
<m-list-box-f> |
||||||
|
<template slot="name">{{$t('Description')}}</template> |
||||||
|
<template slot="content"> |
||||||
|
<x-input |
||||||
|
type="textarea" |
||||||
|
v-model="description" |
||||||
|
:placeholder="$t('Please enter description')" |
||||||
|
autocomplete="off"> |
||||||
|
</x-input> |
||||||
|
</template> |
||||||
|
</m-list-box-f> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</m-popup> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import i18n from '@/module/i18n' |
||||||
|
import store from '@/conf/home/store' |
||||||
|
import localStore from '@/module/util/localStorage' |
||||||
|
import mPopup from '@/module/components/popup/popup' |
||||||
|
import mListBoxF from '@/module/components/listBoxF/listBoxF' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'resource-udf-rename', |
||||||
|
data () { |
||||||
|
return { |
||||||
|
store, |
||||||
|
description: '', |
||||||
|
name: '' |
||||||
|
} |
||||||
|
}, |
||||||
|
props: { |
||||||
|
item: Object |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
_ok (fn) { |
||||||
|
this._verification().then(res => { |
||||||
|
if (this.name === this.item.alias) { |
||||||
|
return new Promise((resolve,reject) => { |
||||||
|
this.description === this.item.description ? reject({msg:'内容未修改'}) : resolve() |
||||||
|
}) |
||||||
|
}else{ |
||||||
|
return this.store.dispatch('resource/resourceVerifyName', { |
||||||
|
fullName: localStore.getItem('currentDir')+'/'+this.name, |
||||||
|
type: 'UDF' |
||||||
|
}) |
||||||
|
} |
||||||
|
}).then(res => { |
||||||
|
return this.store.dispatch('resource/resourceRename', { |
||||||
|
name: this.name, |
||||||
|
description: this.description, |
||||||
|
id: this.item.id, |
||||||
|
type: 'UDF' |
||||||
|
}) |
||||||
|
}).then(res => { |
||||||
|
this.$message.success(res.msg) |
||||||
|
this.$emit('onUpDate', res.data) |
||||||
|
fn() |
||||||
|
}).catch(e => { |
||||||
|
fn() |
||||||
|
this.$message.error(e.msg || '') |
||||||
|
}) |
||||||
|
}, |
||||||
|
_verification () { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
if (!this.name) { |
||||||
|
reject({ // eslint-disable-line |
||||||
|
msg: `${i18n.$t('Please enter resource name')}` |
||||||
|
}) |
||||||
|
} else { |
||||||
|
resolve() |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: {}, |
||||||
|
created () { |
||||||
|
let item = this.item || {} |
||||||
|
if (item) { |
||||||
|
this.name = item.alias |
||||||
|
this.description = item.description |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
}, |
||||||
|
components: { mPopup, mListBoxF } |
||||||
|
} |
||||||
|
</script> |
@ -0,0 +1,174 @@ |
|||||||
|
/* |
||||||
|
* 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. |
||||||
|
*/ |
||||||
|
<template> |
||||||
|
<div class="home-main list-construction-model"> |
||||||
|
<div class="content-title"> |
||||||
|
<a class="bread" style="padding-left: 15px;" @click="() => $router.push({path: `/resource/udf`})">{{$t('UDF Resources')}}</a> |
||||||
|
<a class="bread" v-for="(item,$index) in breadList" :key="$index" @click="_ckOperation($index)">{{'>'+item}}</a> |
||||||
|
</div> |
||||||
|
<div class="conditions-box"> |
||||||
|
<m-conditions @on-conditions="_onConditions"> |
||||||
|
<template slot="button-group"> |
||||||
|
<x-button-group size="small" > |
||||||
|
<x-button type="ghost" @click="() => $router.push({name: 'resource-udf-subCreateUdfFolder'})">{{$t('Create folder')}}</x-button> |
||||||
|
<x-button type="ghost" size="small" @click="_uploading">{{$t('Upload UDF Resources')}}</x-button> |
||||||
|
</x-button-group> |
||||||
|
</template> |
||||||
|
</m-conditions> |
||||||
|
</div> |
||||||
|
<div class="list-box"> |
||||||
|
<template v-if="udfResourcesList.length || total>0"> |
||||||
|
<m-list @on-update="_onUpdate" :udf-resources-list="udfResourcesList" :page-no="searchParams.pageNo" :page-size="searchParams.pageSize"> |
||||||
|
</m-list> |
||||||
|
<div class="page-box"> |
||||||
|
<x-page :current="parseInt(searchParams.pageNo)" :total="total" :page-size="searchParams.pageSize" show-elevator @on-change="_page" show-sizer :page-size-options="[10,30,50]" @on-size-change="_pageSize"></x-page> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<template v-if="!udfResourcesList.length && total<=0"> |
||||||
|
<m-no-data></m-no-data> |
||||||
|
</template> |
||||||
|
<m-spin :is-spin="isLoading"> |
||||||
|
</m-spin> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import _ from 'lodash' |
||||||
|
import { mapActions } from 'vuex' |
||||||
|
import mList from './_source/list' |
||||||
|
import localStore from '@/module/util/localStorage' |
||||||
|
import mSpin from '@/module/components/spin/spin' |
||||||
|
import { findComponentDownward } from '@/module/util/' |
||||||
|
import mNoData from '@/module/components/noData/noData' |
||||||
|
import listUrlParamHandle from '@/module/mixin/listUrlParamHandle' |
||||||
|
import mConditions from '@/module/components/conditions/conditions' |
||||||
|
import mListConstruction from '@/module/components/listConstruction/listConstruction' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'resource-list-index-UDF', |
||||||
|
data () { |
||||||
|
return { |
||||||
|
total: null, |
||||||
|
isLoading: false, |
||||||
|
udfResourcesList: [], |
||||||
|
searchParams: { |
||||||
|
id: this.$route.params.id, |
||||||
|
pageSize: 10, |
||||||
|
pageNo: 1, |
||||||
|
searchVal: '', |
||||||
|
type: 'UDF' |
||||||
|
}, |
||||||
|
breadList: [] |
||||||
|
} |
||||||
|
}, |
||||||
|
mixins: [listUrlParamHandle], |
||||||
|
props: {}, |
||||||
|
methods: { |
||||||
|
...mapActions('resource', ['getResourcesListP','getResourceId']), |
||||||
|
/** |
||||||
|
* File Upload |
||||||
|
*/ |
||||||
|
_uploading () { |
||||||
|
findComponentDownward(this.$root, 'roof-nav')._resourceChildUpdate('UDF',this.searchParams.id) |
||||||
|
}, |
||||||
|
_onConditions (o) { |
||||||
|
this.searchParams = _.assign(this.searchParams, o) |
||||||
|
this.searchParams.pageNo = 1 |
||||||
|
}, |
||||||
|
_page (val) { |
||||||
|
this.searchParams.pageNo = val |
||||||
|
}, |
||||||
|
_pageSize (val) { |
||||||
|
this.searchParams.pageSize = val |
||||||
|
}, |
||||||
|
_onUpdate () { |
||||||
|
this.searchParams.id = this.$route.params.id |
||||||
|
this._debounceGET() |
||||||
|
}, |
||||||
|
_updateList (data) { |
||||||
|
this.searchParams.id = data |
||||||
|
this.searchParams.pageNo = 1 |
||||||
|
this.searchParams.searchVal = '' |
||||||
|
this._debounceGET() |
||||||
|
}, |
||||||
|
_getList (flag) { |
||||||
|
this.isLoading = !flag |
||||||
|
this.getResourcesListP(this.searchParams).then(res => { |
||||||
|
if(this.searchParams.pageNo>1 && res.totalList.length == 0) { |
||||||
|
this.searchParams.pageNo = this.searchParams.pageNo -1 |
||||||
|
} else { |
||||||
|
this.udfResourcesList = [] |
||||||
|
this.udfResourcesList = res.totalList |
||||||
|
this.total = res.total |
||||||
|
this.isLoading = false |
||||||
|
} |
||||||
|
}).catch(e => { |
||||||
|
this.isLoading = false |
||||||
|
}) |
||||||
|
}, |
||||||
|
_ckOperation(index) { |
||||||
|
let breadName ='' |
||||||
|
this.breadList.forEach((item, i) => { |
||||||
|
if(i<=index) { |
||||||
|
breadName = breadName+'/'+item |
||||||
|
} |
||||||
|
}) |
||||||
|
this.transferApi(breadName) |
||||||
|
}, |
||||||
|
transferApi(api) { |
||||||
|
this.getResourceId({ |
||||||
|
type: 'UDF', |
||||||
|
fullName: api |
||||||
|
}).then(res => { |
||||||
|
localStore.setItem('currentDir', `${res.fullName}`) |
||||||
|
this.$router.push({ path: `/resource/udf/subUdfDirectory/${res.id}` }) |
||||||
|
}).catch(e => { |
||||||
|
this.$message.error(e.msg || '') |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
// router |
||||||
|
'$route' (a) { |
||||||
|
// url no params get instance list |
||||||
|
this.searchParams.pageNo = _.isEmpty(a.query) ? 1 : a.query.pageNo |
||||||
|
this.searchParams.id = a.params.id |
||||||
|
let dir = localStore.getItem('currentDir').split('/') |
||||||
|
dir.shift() |
||||||
|
this.breadList = dir |
||||||
|
} |
||||||
|
}, |
||||||
|
created () { |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
let dir = localStore.getItem('currentDir').split('/') |
||||||
|
dir.shift() |
||||||
|
this.breadList = dir |
||||||
|
this.$modal.destroy() |
||||||
|
}, |
||||||
|
components: { mListConstruction, mConditions, mList, mSpin, mNoData } |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style lang="scss" rel="stylesheet/scss"> |
||||||
|
.bread { |
||||||
|
font-size: 22px; |
||||||
|
padding-top: 10px; |
||||||
|
color: #2a455b; |
||||||
|
display: inline-block; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,128 @@ |
|||||||
|
/* |
||||||
|
* 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. |
||||||
|
*/ |
||||||
|
<template> |
||||||
|
<m-list-construction :title="$t('Create folder')"> |
||||||
|
<template slot="content"> |
||||||
|
<div class="resource-create-model"> |
||||||
|
<m-list-box-f> |
||||||
|
<template slot="name"><strong>*</strong>{{$t('Folder Name')}}</template> |
||||||
|
<template slot="content"> |
||||||
|
<x-input |
||||||
|
type="input" |
||||||
|
v-model="name" |
||||||
|
maxlength="60" |
||||||
|
style="width: 300px;" |
||||||
|
:placeholder="$t('Please enter name')" |
||||||
|
autocomplete="off"> |
||||||
|
</x-input> |
||||||
|
</template> |
||||||
|
</m-list-box-f> |
||||||
|
<m-list-box-f> |
||||||
|
<template slot="name">{{$t('Description')}}</template> |
||||||
|
<template slot="content"> |
||||||
|
<x-input |
||||||
|
type="textarea" |
||||||
|
v-model="description" |
||||||
|
style="width: 430px;" |
||||||
|
:placeholder="$t('Please enter description')" |
||||||
|
autocomplete="off"> |
||||||
|
</x-input> |
||||||
|
</template> |
||||||
|
</m-list-box-f> |
||||||
|
<m-list-box-f> |
||||||
|
<template slot="name"> </template> |
||||||
|
<template slot="content"> |
||||||
|
<div class="submit"> |
||||||
|
<x-button type="primary" shape="circle" :loading="spinnerLoading" @click="ok()">{{spinnerLoading ? 'Loading...' : $t('Create')}} </x-button> |
||||||
|
<x-button type="text" @click="() => $router.push({name: 'resource-udf-subUdfDirectory'})"> {{$t('Cancel')}} </x-button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</m-list-box-f> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</m-list-construction> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import i18n from '@/module/i18n' |
||||||
|
import { mapActions } from 'vuex' |
||||||
|
import mListBoxF from '@/module/components/listBoxF/listBoxF' |
||||||
|
import mSpin from '@/module/components/spin/spin' |
||||||
|
import mConditions from '@/module/components/conditions/conditions' |
||||||
|
import localStore from '@/module/util/localStorage' |
||||||
|
import mListConstruction from '@/module/components/listConstruction/listConstruction' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'resource-list-create-FILE', |
||||||
|
data () { |
||||||
|
return { |
||||||
|
type: '', |
||||||
|
name: '', |
||||||
|
description: '', |
||||||
|
spinnerLoading: false |
||||||
|
} |
||||||
|
}, |
||||||
|
props: {}, |
||||||
|
methods: { |
||||||
|
...mapActions('resource', ['createResourceFolder']), |
||||||
|
ok () { |
||||||
|
if (this._validation()) { |
||||||
|
this.spinnerLoading = true |
||||||
|
this.createResourceFolder({ |
||||||
|
type: 'UDF', |
||||||
|
name: this.name, |
||||||
|
currentDir: localStore.getItem('currentDir'), |
||||||
|
pid: this.$route.params.id, |
||||||
|
description: this.description |
||||||
|
}).then(res => { |
||||||
|
this.$message.success(res.msg) |
||||||
|
setTimeout(() => { |
||||||
|
this.spinnerLoading = false |
||||||
|
this.$router.push({ path: `/resource/udf/subUdfDirectory/${this.$route.params.id}`}) |
||||||
|
}, 800) |
||||||
|
}).catch(e => { |
||||||
|
this.$message.error(e.msg || '') |
||||||
|
this.spinnerLoading = false |
||||||
|
}) |
||||||
|
} |
||||||
|
}, |
||||||
|
_validation () { |
||||||
|
if (!this.name) { |
||||||
|
this.$message.warning(`${i18n.$t('Please enter resource folder name')}`) |
||||||
|
return false |
||||||
|
} |
||||||
|
|
||||||
|
return true |
||||||
|
}, |
||||||
|
}, |
||||||
|
watch: {}, |
||||||
|
created () { |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
this.$modal.destroy() |
||||||
|
}, |
||||||
|
destroyed () { |
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
components: { mListConstruction, mConditions, mSpin, mListBoxF } |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" rel="stylesheet/scss"> |
||||||
|
.resource-create-model { |
||||||
|
padding: 30px; |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,318 @@ |
|||||||
|
/* |
||||||
|
* 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. |
||||||
|
*/ |
||||||
|
<template> |
||||||
|
<m-popup |
||||||
|
ref="popup" |
||||||
|
:ok-text="$t('Upload')" |
||||||
|
:nameText="$t('File Upload')" |
||||||
|
@ok="_ok" |
||||||
|
:disabled="progress === 0 ? false : true"> |
||||||
|
<template slot="content"> |
||||||
|
<form name="files" enctype="multipart/form-data" method="post"> |
||||||
|
<div class="file-update-model" |
||||||
|
@drop.prevent="_onDrop" |
||||||
|
@dragover.prevent="dragOver = true" |
||||||
|
@dragleave.prevent="dragOver = false" |
||||||
|
id="file-update-model"> |
||||||
|
<div class="tooltip-info"> |
||||||
|
<em class="ans ans-icon-warn-solid"></em> |
||||||
|
<span>{{$t('Drag the file into the current upload window')}}</span> |
||||||
|
</div> |
||||||
|
<!--<div class="hide-archive" v-if="progress !== 0" @click="_ckArchive"> |
||||||
|
<em class="fa fa-minus" data-toggle="tooltip" title="关闭窗口 继续上传" data-container="body" ></em> |
||||||
|
</div>--> |
||||||
|
<div class="update-popup" v-if="dragOver"> |
||||||
|
<div class="icon-box"> |
||||||
|
<em class="ans ans-icon-upload"></em> |
||||||
|
</div> |
||||||
|
<p class="p1"> |
||||||
|
<span>{{$t('Drag area upload')}}</span> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
<m-list-box-f> |
||||||
|
<template slot="name"><strong>*</strong>{{$t('File Name')}}</template> |
||||||
|
<template slot="content"> |
||||||
|
<x-input |
||||||
|
type="input" |
||||||
|
v-model="name" |
||||||
|
:disabled="progress !== 0" |
||||||
|
:placeholder="$t('Please enter name')" |
||||||
|
autocomplete="off"> |
||||||
|
</x-input> |
||||||
|
</template> |
||||||
|
</m-list-box-f> |
||||||
|
<m-list-box-f> |
||||||
|
<template slot="name">{{$t('Description')}}</template> |
||||||
|
<template slot="content"> |
||||||
|
<x-input |
||||||
|
type="textarea" |
||||||
|
v-model="description" |
||||||
|
:disabled="progress !== 0" |
||||||
|
:placeholder="$t('Please enter description')" |
||||||
|
autocomplete="off"> |
||||||
|
</x-input> |
||||||
|
</template> |
||||||
|
</m-list-box-f> |
||||||
|
<m-list-box-f> |
||||||
|
<template slot="name"><strong>*</strong>{{$t('Upload Files')}}</template> |
||||||
|
<template slot="content"> |
||||||
|
<div class="file-update-box"> |
||||||
|
<template v-if="progress === 0"> |
||||||
|
<input name="file" id="file" type="file" class="file-update"> |
||||||
|
<x-button type="dashed" size="xsmall"> {{$t('Upload')}} </x-button> |
||||||
|
</template> |
||||||
|
<div class="progress-box" v-if="progress !== 0"> |
||||||
|
<m-progress-bar :value="progress" text-placement="left-right"></m-progress-bar> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</m-list-box-f> |
||||||
|
</div> |
||||||
|
</form> |
||||||
|
</template> |
||||||
|
</m-popup> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import io from '@/module/io' |
||||||
|
import i18n from '@/module/i18n' |
||||||
|
import store from '@/conf/home/store' |
||||||
|
import localStore from '@/module/util/localStorage' |
||||||
|
import mPopup from '@/module/components/popup/popup' |
||||||
|
import mListBoxF from '@/module/components/listBoxF/listBoxF' |
||||||
|
import mProgressBar from '@/module/components/progressBar/progressBar' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'file-update', |
||||||
|
data () { |
||||||
|
return { |
||||||
|
store, |
||||||
|
// name |
||||||
|
name: '', |
||||||
|
// description |
||||||
|
description: '', |
||||||
|
// progress |
||||||
|
progress: 0, |
||||||
|
// file |
||||||
|
file: '', |
||||||
|
currentDir: localStore.getItem('currentDir'), |
||||||
|
pid: this.id, |
||||||
|
// Whether to drag upload |
||||||
|
dragOver: false |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
}, |
||||||
|
props: { |
||||||
|
type: String, |
||||||
|
id: Number |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
/** |
||||||
|
* submit |
||||||
|
*/ |
||||||
|
_ok () { |
||||||
|
this.$refs['popup'].spinnerLoading = true |
||||||
|
if (this._validation()) { |
||||||
|
this.store.dispatch('resource/resourceVerifyName', { |
||||||
|
fullName: this.currentDir+'/'+this.name, |
||||||
|
type: this.type |
||||||
|
}).then(res => { |
||||||
|
const isLt1024M = this.file.size / 1024 / 1024 < 1024 |
||||||
|
if(isLt1024M) { |
||||||
|
this._formDataUpdate().then(res => { |
||||||
|
setTimeout(() => { |
||||||
|
this.$refs['popup'].spinnerLoading = false |
||||||
|
}, 800) |
||||||
|
}).catch(e => { |
||||||
|
this.$refs['popup'].spinnerLoading = false |
||||||
|
}) |
||||||
|
} else { |
||||||
|
this.$message.warning(`${i18n.$t('Upload File Size')}`) |
||||||
|
this.$refs['popup'].spinnerLoading = false |
||||||
|
} |
||||||
|
}).catch(e => { |
||||||
|
this.$message.error(e.msg || '') |
||||||
|
this.$refs['popup'].spinnerLoading = false |
||||||
|
}) |
||||||
|
} else { |
||||||
|
this.$refs['popup'].spinnerLoading = false |
||||||
|
} |
||||||
|
}, |
||||||
|
/** |
||||||
|
* validation |
||||||
|
*/ |
||||||
|
_validation () { |
||||||
|
if (!this.name) { |
||||||
|
this.$message.warning(`${i18n.$t('Please enter file name')}`) |
||||||
|
return false |
||||||
|
} |
||||||
|
if (!this.file) { |
||||||
|
this.$message.warning(`${i18n.$t('Please select the file to upload')}`) |
||||||
|
return false |
||||||
|
} |
||||||
|
return true |
||||||
|
}, |
||||||
|
/** |
||||||
|
* update file |
||||||
|
*/ |
||||||
|
_formDataUpdate () { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
let self = this |
||||||
|
let formData = new FormData() |
||||||
|
formData.append('file', this.file) |
||||||
|
formData.append('type', this.type) |
||||||
|
formData.append('name', this.name) |
||||||
|
formData.append('pid', this.pid) |
||||||
|
formData.append('currentDir', this.currentDir) |
||||||
|
formData.append('description', this.description) |
||||||
|
io.post(`resources/create`, res => { |
||||||
|
this.$message.success(res.msg) |
||||||
|
resolve() |
||||||
|
self.$emit('onUpdate') |
||||||
|
}, e => { |
||||||
|
reject(e) |
||||||
|
self.$emit('close') |
||||||
|
this.$message.error(e.msg || '') |
||||||
|
}, { |
||||||
|
data: formData, |
||||||
|
emulateJSON: false, |
||||||
|
onUploadProgress (progressEvent) { |
||||||
|
// Size has been uploaded |
||||||
|
let loaded = progressEvent.loaded |
||||||
|
// Total attachment size |
||||||
|
let total = progressEvent.total |
||||||
|
self.progress = Math.floor(100 * loaded / total) |
||||||
|
self.$emit('onProgress', self.progress) |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
/** |
||||||
|
* Archive to the top right corner Continue uploading |
||||||
|
*/ |
||||||
|
_ckArchive () { |
||||||
|
$('.update-file-modal').hide() |
||||||
|
this.$emit('onArchive') |
||||||
|
}, |
||||||
|
/** |
||||||
|
* Drag and drop upload |
||||||
|
*/ |
||||||
|
_onDrop (e) { |
||||||
|
let file = e.dataTransfer.files[0] |
||||||
|
this.file = file |
||||||
|
this.name = file.name |
||||||
|
this.dragOver = false |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
$('#file').change(() => { |
||||||
|
let file = $('#file')[0].files[0] |
||||||
|
this.file = file |
||||||
|
this.name = file.name |
||||||
|
}) |
||||||
|
}, |
||||||
|
components: { mPopup, mListBoxF, mProgressBar } |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" rel="stylesheet/scss"> |
||||||
|
.file-update-model { |
||||||
|
.tooltip-info { |
||||||
|
position: absolute; |
||||||
|
left: 20px; |
||||||
|
bottom: 26px; |
||||||
|
span { |
||||||
|
font-size: 12px; |
||||||
|
color: #666; |
||||||
|
vertical-align: middle; |
||||||
|
} |
||||||
|
.fa,.ans { |
||||||
|
color: #0097e0; |
||||||
|
font-size: 14px; |
||||||
|
vertical-align: middle; |
||||||
|
} |
||||||
|
} |
||||||
|
.hide-archive { |
||||||
|
position: absolute; |
||||||
|
right: 22px; |
||||||
|
top: 17px; |
||||||
|
.fa,.ans{ |
||||||
|
font-size: 16px; |
||||||
|
color: #333; |
||||||
|
font-weight: normal; |
||||||
|
cursor: pointer; |
||||||
|
&:hover { |
||||||
|
color: #0097e0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.file-update-box { |
||||||
|
padding-top: 4px; |
||||||
|
position: relative; |
||||||
|
.file-update { |
||||||
|
width: 70px; |
||||||
|
height: 40px; |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
cursor: pointer; |
||||||
|
filter: alpha(opacity=0); |
||||||
|
-moz-opacity: 0; |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
&:hover { |
||||||
|
.v-btn-dashed { |
||||||
|
background-color: transparent; |
||||||
|
border-color: #47c3ff; |
||||||
|
color: #47c3ff; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
.progress-box { |
||||||
|
width: 200px; |
||||||
|
position: absolute; |
||||||
|
left: 70px; |
||||||
|
top: 14px; |
||||||
|
} |
||||||
|
} |
||||||
|
.update-popup { |
||||||
|
width: calc(100% - 20px); |
||||||
|
height: calc(100% - 20px); |
||||||
|
background: rgba(255,253,239,.7); |
||||||
|
position: absolute; |
||||||
|
top: 10px; |
||||||
|
left: 10px; |
||||||
|
border-radius: 3px; |
||||||
|
z-index: 1; |
||||||
|
border: .18rem dashed #cccccc; |
||||||
|
.icon-box { |
||||||
|
text-align: center; |
||||||
|
margin-top: 96px; |
||||||
|
.fa,.ans { |
||||||
|
font-size: 50px; |
||||||
|
color: #2d8cf0; |
||||||
|
} |
||||||
|
} |
||||||
|
.p1 { |
||||||
|
text-align: center; |
||||||
|
font-size: 16px; |
||||||
|
color: #333; |
||||||
|
padding-top: 8px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
@ -0,0 +1,318 @@ |
|||||||
|
/* |
||||||
|
* 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. |
||||||
|
*/ |
||||||
|
<template> |
||||||
|
<m-popup |
||||||
|
ref="popup" |
||||||
|
:ok-text="$t('Upload')" |
||||||
|
:nameText="$t('File Upload')" |
||||||
|
@ok="_ok" |
||||||
|
:disabled="progress === 0 ? false : true"> |
||||||
|
<template slot="content"> |
||||||
|
<form name="files" enctype="multipart/form-data" method="post"> |
||||||
|
<div class="file-update-model" |
||||||
|
@drop.prevent="_onDrop" |
||||||
|
@dragover.prevent="dragOver = true" |
||||||
|
@dragleave.prevent="dragOver = false" |
||||||
|
id="file-update-model"> |
||||||
|
<div class="tooltip-info"> |
||||||
|
<em class="ans ans-icon-warn-solid"></em> |
||||||
|
<span>{{$t('Drag the file into the current upload window')}}</span> |
||||||
|
</div> |
||||||
|
<!--<div class="hide-archive" v-if="progress !== 0" @click="_ckArchive"> |
||||||
|
<em class="fa fa-minus" data-toggle="tooltip" title="关闭窗口 继续上传" data-container="body" ></em> |
||||||
|
</div>--> |
||||||
|
<div class="update-popup" v-if="dragOver"> |
||||||
|
<div class="icon-box"> |
||||||
|
<em class="ans ans-icon-upload"></em> |
||||||
|
</div> |
||||||
|
<p class="p1"> |
||||||
|
<span>{{$t('Drag area upload')}}</span> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
<m-list-box-f> |
||||||
|
<template slot="name"><strong>*</strong>{{$t('File Name')}}</template> |
||||||
|
<template slot="content"> |
||||||
|
<x-input |
||||||
|
type="input" |
||||||
|
v-model="name" |
||||||
|
:disabled="progress !== 0" |
||||||
|
:placeholder="$t('Please enter name')" |
||||||
|
autocomplete="off"> |
||||||
|
</x-input> |
||||||
|
</template> |
||||||
|
</m-list-box-f> |
||||||
|
<m-list-box-f> |
||||||
|
<template slot="name">{{$t('Description')}}</template> |
||||||
|
<template slot="content"> |
||||||
|
<x-input |
||||||
|
type="textarea" |
||||||
|
v-model="description" |
||||||
|
:disabled="progress !== 0" |
||||||
|
:placeholder="$t('Please enter description')" |
||||||
|
autocomplete="off"> |
||||||
|
</x-input> |
||||||
|
</template> |
||||||
|
</m-list-box-f> |
||||||
|
<m-list-box-f> |
||||||
|
<template slot="name"><strong>*</strong>{{$t('Upload Files')}}</template> |
||||||
|
<template slot="content"> |
||||||
|
<div class="file-update-box"> |
||||||
|
<template v-if="progress === 0"> |
||||||
|
<input name="file" id="file" type="file" class="file-update"> |
||||||
|
<x-button type="dashed" size="xsmall"> {{$t('Upload')}} </x-button> |
||||||
|
</template> |
||||||
|
<div class="progress-box" v-if="progress !== 0"> |
||||||
|
<m-progress-bar :value="progress" text-placement="left-right"></m-progress-bar> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</m-list-box-f> |
||||||
|
</div> |
||||||
|
</form> |
||||||
|
</template> |
||||||
|
</m-popup> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import io from '@/module/io' |
||||||
|
import i18n from '@/module/i18n' |
||||||
|
import store from '@/conf/home/store' |
||||||
|
import localStore from '@/module/util/localStorage' |
||||||
|
import mPopup from '@/module/components/popup/popup' |
||||||
|
import mListBoxF from '@/module/components/listBoxF/listBoxF' |
||||||
|
import mProgressBar from '@/module/components/progressBar/progressBar' |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'file-update', |
||||||
|
data () { |
||||||
|
return { |
||||||
|
store, |
||||||
|
// name |
||||||
|
name: '', |
||||||
|
// description |
||||||
|
description: '', |
||||||
|
// progress |
||||||
|
progress: 0, |
||||||
|
// file |
||||||
|
file: '', |
||||||
|
currentDir: localStore.getItem('currentDir'), |
||||||
|
pid: this.id, |
||||||
|
// Whether to drag upload |
||||||
|
dragOver: false |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
}, |
||||||
|
props: { |
||||||
|
type: String, |
||||||
|
id: Number |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
/** |
||||||
|
* submit |
||||||
|
*/ |
||||||
|
_ok () { |
||||||
|
this.$refs['popup'].spinnerLoading = true |
||||||
|
if (this._validation()) { |
||||||
|
this.store.dispatch('resource/resourceVerifyName', { |
||||||
|
fullName: this.currentDir+'/'+this.name, |
||||||
|
type: this.type |
||||||
|
}).then(res => { |
||||||
|
const isLt1024M = this.file.size / 1024 / 1024 < 1024 |
||||||
|
if(isLt1024M) { |
||||||
|
this._formDataUpdate().then(res => { |
||||||
|
setTimeout(() => { |
||||||
|
this.$refs['popup'].spinnerLoading = false |
||||||
|
}, 800) |
||||||
|
}).catch(e => { |
||||||
|
this.$refs['popup'].spinnerLoading = false |
||||||
|
}) |
||||||
|
} else { |
||||||
|
this.$message.warning(`${i18n.$t('Upload File Size')}`) |
||||||
|
this.$refs['popup'].spinnerLoading = false |
||||||
|
} |
||||||
|
}).catch(e => { |
||||||
|
this.$message.error(e.msg || '') |
||||||
|
this.$refs['popup'].spinnerLoading = false |
||||||
|
}) |
||||||
|
} else { |
||||||
|
this.$refs['popup'].spinnerLoading = false |
||||||
|
} |
||||||
|
}, |
||||||
|
/** |
||||||
|
* validation |
||||||
|
*/ |
||||||
|
_validation () { |
||||||
|
if (!this.name) { |
||||||
|
this.$message.warning(`${i18n.$t('Please enter file name')}`) |
||||||
|
return false |
||||||
|
} |
||||||
|
if (!this.file) { |
||||||
|
this.$message.warning(`${i18n.$t('Please select the file to upload')}`) |
||||||
|
return false |
||||||
|
} |
||||||
|
return true |
||||||
|
}, |
||||||
|
/** |
||||||
|
* update file |
||||||
|
*/ |
||||||
|
_formDataUpdate () { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
let self = this |
||||||
|
let formData = new FormData() |
||||||
|
formData.append('file', this.file) |
||||||
|
formData.append('type', this.type) |
||||||
|
formData.append('name', this.name) |
||||||
|
formData.append('pid', this.pid) |
||||||
|
formData.append('currentDir', this.currentDir) |
||||||
|
formData.append('description', this.description) |
||||||
|
io.post(`resources/create`, res => { |
||||||
|
this.$message.success(res.msg) |
||||||
|
resolve() |
||||||
|
self.$emit('onUpdate') |
||||||
|
}, e => { |
||||||
|
reject(e) |
||||||
|
self.$emit('close') |
||||||
|
this.$message.error(e.msg || '') |
||||||
|
}, { |
||||||
|
data: formData, |
||||||
|
emulateJSON: false, |
||||||
|
onUploadProgress (progressEvent) { |
||||||
|
// Size has been uploaded |
||||||
|
let loaded = progressEvent.loaded |
||||||
|
// Total attachment size |
||||||
|
let total = progressEvent.total |
||||||
|
self.progress = Math.floor(100 * loaded / total) |
||||||
|
self.$emit('onProgress', self.progress) |
||||||
|
} |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
/** |
||||||
|
* Archive to the top right corner Continue uploading |
||||||
|
*/ |
||||||
|
_ckArchive () { |
||||||
|
$('.update-file-modal').hide() |
||||||
|
this.$emit('onArchive') |
||||||
|
}, |
||||||
|
/** |
||||||
|
* Drag and drop upload |
||||||
|
*/ |
||||||
|
_onDrop (e) { |
||||||
|
let file = e.dataTransfer.files[0] |
||||||
|
this.file = file |
||||||
|
this.name = file.name |
||||||
|
this.dragOver = false |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted () { |
||||||
|
$('#file').change(() => { |
||||||
|
let file = $('#file')[0].files[0] |
||||||
|
this.file = file |
||||||
|
this.name = file.name |
||||||
|
}) |
||||||
|
}, |
||||||
|
components: { mPopup, mListBoxF, mProgressBar } |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" rel="stylesheet/scss"> |
||||||
|
.file-update-model { |
||||||
|
.tooltip-info { |
||||||
|
position: absolute; |
||||||
|
left: 20px; |
||||||
|
bottom: 26px; |
||||||
|
span { |
||||||
|
font-size: 12px; |
||||||
|
color: #666; |
||||||
|
vertical-align: middle; |
||||||
|
} |
||||||
|
.fa,.ans { |
||||||
|
color: #0097e0; |
||||||
|
font-size: 14px; |
||||||
|
vertical-align: middle; |
||||||
|
} |
||||||
|
} |
||||||
|
.hide-archive { |
||||||
|
position: absolute; |
||||||
|
right: 22px; |
||||||
|
top: 17px; |
||||||
|
.fa,.ans{ |
||||||
|
font-size: 16px; |
||||||
|
color: #333; |
||||||
|
font-weight: normal; |
||||||
|
cursor: pointer; |
||||||
|
&:hover { |
||||||
|
color: #0097e0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.file-update-box { |
||||||
|
padding-top: 4px; |
||||||
|
position: relative; |
||||||
|
.file-update { |
||||||
|
width: 70px; |
||||||
|
height: 40px; |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
cursor: pointer; |
||||||
|
filter: alpha(opacity=0); |
||||||
|
-moz-opacity: 0; |
||||||
|
opacity: 0; |
||||||
|
} |
||||||
|
&:hover { |
||||||
|
.v-btn-dashed { |
||||||
|
background-color: transparent; |
||||||
|
border-color: #47c3ff; |
||||||
|
color: #47c3ff; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
.progress-box { |
||||||
|
width: 200px; |
||||||
|
position: absolute; |
||||||
|
left: 70px; |
||||||
|
top: 14px; |
||||||
|
} |
||||||
|
} |
||||||
|
.update-popup { |
||||||
|
width: calc(100% - 20px); |
||||||
|
height: calc(100% - 20px); |
||||||
|
background: rgba(255,253,239,.7); |
||||||
|
position: absolute; |
||||||
|
top: 10px; |
||||||
|
left: 10px; |
||||||
|
border-radius: 3px; |
||||||
|
z-index: 1; |
||||||
|
border: .18rem dashed #cccccc; |
||||||
|
.icon-box { |
||||||
|
text-align: center; |
||||||
|
margin-top: 96px; |
||||||
|
.fa,.ans { |
||||||
|
font-size: 50px; |
||||||
|
color: #2d8cf0; |
||||||
|
} |
||||||
|
} |
||||||
|
.p1 { |
||||||
|
text-align: center; |
||||||
|
font-size: 16px; |
||||||
|
color: #333; |
||||||
|
padding-top: 8px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
@ -1,16 +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. |
|
||||||
*/ |
|
Loading…
Reference in new issue