|
|
@@ -1,23 +1,226 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
<el-button type="primary" text @click="show = true">移动</el-button>
|
|
|
- <el-dialog v-model="show" width="800">
|
|
|
- <div class="full-width content">
|
|
|
- <div v-for="i in 20" class="padding light-green-bg mb-5">333</div>
|
|
|
+ <el-dialog v-model="show" width="800" :show-close="false">
|
|
|
+ <template #header>
|
|
|
+ <div class="full-width flex flex-center flex-justify-between">
|
|
|
+ <h4>移动文件</h4>
|
|
|
+ <div class="flex flex-center flex-justify-end">
|
|
|
+ <div class="flex flex-center">
|
|
|
+ <span class="mr-10">项目阶段:</span>
|
|
|
+ <el-select
|
|
|
+ v-model="stageId"
|
|
|
+ remote
|
|
|
+ filterable
|
|
|
+ clearable
|
|
|
+ placeholder="筛选项目阶段"
|
|
|
+ style="width: 200px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in stageList"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <el-button
|
|
|
+ type="info"
|
|
|
+ class="ml-10"
|
|
|
+ circle
|
|
|
+ icon="Close"
|
|
|
+ @click="show = false"
|
|
|
+ >
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div>
|
|
|
+ <file-way
|
|
|
+ class="mb-10"
|
|
|
+ :next="currentFolder"
|
|
|
+ @before="goBefore"
|
|
|
+ @goHome="getFolderList"
|
|
|
+ />
|
|
|
+ <div class="mt-20 border-top flex flex-center flex-col">
|
|
|
+ <div
|
|
|
+ v-if="data.length === 0"
|
|
|
+ class="flex flex-center content flex-col full-height"
|
|
|
+ >
|
|
|
+ <el-empty
|
|
|
+ :description="loading ? '加载中...' : '暂无数据'"
|
|
|
+ ></el-empty>
|
|
|
+ </div>
|
|
|
+ <div v-else class="full-width content border-top">
|
|
|
+ <div
|
|
|
+ v-for="i in data"
|
|
|
+ class="padding light-green-bg row"
|
|
|
+ :key="i.id"
|
|
|
+ @click="getFileList(i)"
|
|
|
+ >
|
|
|
+ <div class="flex flex-center flex-justify-start">
|
|
|
+ <img
|
|
|
+ v-if="i.isAccess === 1"
|
|
|
+ src="../../../assets/svg/folder/see.svg"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-if="i.isAccess === 2"
|
|
|
+ src="../../../assets/svg/folder/edit.svg"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-if="i.isAccess === 3"
|
|
|
+ src="../../../assets/svg/folder/invisible.svg"
|
|
|
+ />
|
|
|
+ {{ i.title }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="full-width flex flex-justify-end flex-center mt-20">
|
|
|
- <el-button type="primary" plain>取 消</el-button>
|
|
|
- <el-button type="primary">移动到此</el-button>
|
|
|
+ <el-button type="primary" plain @click="show = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="move">移动到此</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import fileWay from '@/components/file-way/index.vue'
|
|
|
+
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ fileWay
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ projectId: {
|
|
|
+ required: true,
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ fileId: {
|
|
|
+ required: true,
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ show: {
|
|
|
+ handler(val) {
|
|
|
+ if (val) {
|
|
|
+ this.getStage()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
- show: false
|
|
|
+ loading: false,
|
|
|
+ show: false,
|
|
|
+ currentFolder: null,
|
|
|
+ stageId: '',
|
|
|
+ topFolder: true,
|
|
|
+ data: [],
|
|
|
+ stageList: [],
|
|
|
+ page: {
|
|
|
+ current: 1,
|
|
|
+ size: 10
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * 获取项目阶段
|
|
|
+ */
|
|
|
+ getStage() {
|
|
|
+ this.$api.project
|
|
|
+ .includeStage({ projectId: this.projectId })
|
|
|
+ .then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.stageList = res.data
|
|
|
+ const tmp = this.stageList.find(ele => ele.isLastSelect === 1)
|
|
|
+ if (tmp) {
|
|
|
+ this.stageId = tmp.id
|
|
|
+ } else {
|
|
|
+ this.stageId = this.stageList[0].id
|
|
|
+ }
|
|
|
+ this.getFolderList()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取阶段对应的一级文件夹
|
|
|
+ */
|
|
|
+ getFolderList() {
|
|
|
+ this.loading = true
|
|
|
+ this.topFolder = true
|
|
|
+ const data = {
|
|
|
+ stageId: this.stageId,
|
|
|
+ dictKey: 1,
|
|
|
+ current: this.page.current,
|
|
|
+ size: this.page.size
|
|
|
+ }
|
|
|
+ this.data.length = 0
|
|
|
+ this.loading = true
|
|
|
+ this.top = true
|
|
|
+ this.$api.resource.folderList(data).then(res => {
|
|
|
+ this.loading = false
|
|
|
+ this.loading = false
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.data = res.data.records
|
|
|
+ this.page.total = res.data.total
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取文件夹下面的文件及文件夹
|
|
|
+ * @param row
|
|
|
+ */
|
|
|
+ getFileList(row) {
|
|
|
+ if (row.isAccess !== 2) {
|
|
|
+ this.$message.error('您暂无权限访问此文件夹,如需访问请主动申请授权')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.loading = true
|
|
|
+ this.topFolder = false
|
|
|
+ this.currentFolder = row
|
|
|
+ const item = {
|
|
|
+ id: row.id,
|
|
|
+ current: this.page.current,
|
|
|
+ size: this.page.size,
|
|
|
+ type: 2
|
|
|
+ }
|
|
|
+ this.loading = true
|
|
|
+ this.data.length = 0
|
|
|
+ this.$api.resource.fileList(item).then(res => {
|
|
|
+ this.loading = false
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.data = res.data.records
|
|
|
+ this.page.total = res.data.total
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ goBefore(res) {
|
|
|
+ if (!this.topFolder) {
|
|
|
+ this.getFileList(res)
|
|
|
+ } else {
|
|
|
+ this.getFolderList()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ move() {
|
|
|
+ this.$api.resource
|
|
|
+ .fileMove({ fileId: this.fileId, folderId: this.currentFolder.id })
|
|
|
+ .then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$message.success(res.msg)
|
|
|
+ this.show = false
|
|
|
+ this.$emit('on-success')
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -27,6 +230,20 @@ export default {
|
|
|
.content {
|
|
|
height: 500px;
|
|
|
overflow-y: scroll;
|
|
|
- background-color: red;
|
|
|
+}
|
|
|
+
|
|
|
+.row {
|
|
|
+ border-bottom: #eeeeee solid 1px;
|
|
|
+ background-color: white;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 30px;
|
|
|
+ height: auto;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.row:hover {
|
|
|
+ background-color: #f7f9fc;
|
|
|
}
|
|
|
</style>
|