wt_project_web_bak/src/views/resource/index.vue

<template>
  <div>
    <tips-custom>
      <template #default>
        <div class="flex flex-center">
          <span class="mr-10 nowrap">项目阶段</span>
          <el-select
            v-model="folderInfo.stageId"
            remote
            filterable
            style="width: 200px"
            clearable
            placeholder="筛选项目阶段"
            :disabled="!top"
            @change="folderResult"
          >
            <el-option
              v-for="item in stage"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
      </template>
    </tips-custom>
    <!--    content-->
    <el-card shadow="hover" class="content">
      <div>
        <div class="full-width flex flex-center flex-justify-between">
          <div class="full-width flex flex-justify-start flex-center">
            <upload-file
              v-if="!top && currentFolder.fileStatus !== 1"
              @on-success="uploadSuccess"
              :data="{ type: 1 }"
              :project-id="folderInfo.projectId"
              :stage-id="folderInfo.stageId"
              :parent-id="currentFolder.id"
            />
            <el-button
              class="ml-10"
              type="primary"
              icon="Folder"
              :plain="!top"
              @click="showDialog(1)"
              v-if="
                canCreateFolder &&
                (currentFolder ? currentFolder.fileStatus !== 1 : true)
              "
              >新建文件夹
            </el-button>
            <authorize
              class="ml-10"
              :list="selectedList"
              v-if="canCreateFolder"
            />
          </div>
          <div class="flex flex-center main-color mr-10">
            <search
              :stage-id="folderInfo.stageId"
              :folder-id="currentFolder ? currentFolder.id : ''"
            />
          </div>
        </div>
        <file-way
          :next="currentFolder"
          :refresh-btn="true"
          @before="goBefore"
          @goHome="getFolderList"
          @refresh="refreshData"
          class="mt-20"
        />
        <xtable
          :data="data"
          :option="option"
          :loading="loading"
          :page="page"
          :top-folder="top"
          @selected="selected"
          @row-click="getFileList"
          @current-change="currentChange"
          @refresh="refreshData"
          @selection="selectAll"
        >
          <template #menu="{ row }">
            <el-button
              v-if="row.type === 2 && row.fileStatus === 0"
              type="primary"
              text
              @click="renameFolder(row)"
              >重命名
            </el-button>
          </template>
        </xtable>
      </div>
    </el-card>

    <el-dialog
      v-model="show"
      :title="title"
      :width="width"
      @close="closeDialog"
    >
      <floder
        v-if="showType === 1"
        :info="folderInfo"
        :rename="rename"
        @close="closeDialog"
      ></floder>
    </el-dialog>
  </div>
</template>

<route>
{
name: '资料管理',
meta: { 'show': false, layout: 'empty'}
}
</route>

<script>
import tipsCustom from '@/components/tips-custom/index.vue'
import xtable from '@/views/resource/component/xtable.vue'
import floder from '@/views/resource/component/floder.vue'
import uploadFile from '@/components/upload-file/index.vue'
import fileWay from '@/components/file-way/index.vue'
import authorize from '@/views/resource/component/authorize.vue'
import search from '@/views/resource/component/search.vue'

export default {
  components: {
    tipsCustom,
    xtable,
    floder,
    uploadFile,
    fileWay,
    authorize,
    search
  },

  data() {
    return {
      show: false,
      showType: 1,
      width: 380,
      title: '新建文件夹',
      rename: false,
      top: true,
      loading: false,
      currentFolder: null,
      selectedList: [],
      data: [],
      canCreateFolder: false,
      option: {
        showCheckBox: false,
        folderChecked: true,
        column: [
          {
            label: '名称',
            prop: 'title',
            display: false,
            width: 270
          },
          {
            label: '创建人',
            prop: 'createUserName'
          },
          {
            label: '创建时间',
            prop: 'createTime'
          }
        ]
      },
      option2: {
        column: [
          {
            label: '名称2',
            prop: 'title',
            display: false
          },
          {
            label: '创建人',
            prop: 'createUserName'
          }
        ]
      },
      stage: [],
      folderInfo: {
        projectId: '',
        stageId: ''
      },
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      total: ''
    }
  },
  created() {
    this.folderInfo.projectId = this.$route.query.id
    this.getStage()
    this.queryCreateFolder()
  },
  methods: {
    queryCreateFolder() {
      this.$api.project
        .queryCreateFolder({ projectId: this.folderInfo.projectId })
        .then(res => {
          if (res.code === 200) {
            this.canCreateFolder = res.data.status === 2
          } else {
            console.log(res)
          }
        })
    },
    showDialog(type) {
      this.showType = type
      this.show = true
      this.title = '新建文件夹'
    },
    folderAdd() {
      this.$api.resource.folderAddUpdate().then(res => {
        if (res.code === 200) {
          this.refreshData()
        }
      })
    },
    closeDialog() {
      this.show = false
      if (this.top) {
        this.getFolderList()
      } else {
        this.getFileList(this.currentFolder)
      }
    },
    /**
     * 获取阶段对应的一级文件夹
     */
    getFolderList() {
      const data = {
        projectId: this.folderInfo.projectId,
        stageId: this.folderInfo.stageId,
        dictKey: 1,
        current: this.page.current,
        size: this.page.size
      }
      this.currentFolder = null
      this.loading = true
      this.top = true
      this.$api.resource.folderList(data).then(res => {
        this.loading = false
        if (res.code === 200) {
          this.data = res.data.records
          this.page.total = res.data.total
        }
      })
    },
    /**
     * 获取二级文件
     * @param row
     */
    getFileList(row) {
      this.data.length = 0
      this.currentFolder = row
      this.folderInfo = Object.assign(this.folderInfo, row)
      this.top = false
      const data = {
        id: row.id,
        current: this.page.current,
        size: this.page.size
      }
      this.loading = true
      this.$api.resource.fileList(data).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)
        }
      })
    },
    /**
     * 获取项目阶段
     */
    getStage() {
      this.$api.project
        .includeStage({ projectId: this.folderInfo.projectId })
        .then(res => {
          if (res.code === 200) {
            this.stage = res.data
            const tmp = this.stage.find(ele => ele.isLastSelect === 1)
            if (tmp) {
              this.folderInfo.stageId = tmp.id
            } else {
              this.folderInfo.stageId = this.stage[0].id
            }
            this.getFolderList()
          }
        })
    },
    folderResult(res) {
      this.loading = true
      this.stageId = res
      this.getFolderList()
    },
    /**
     * 文件上传成功侯刷新文件列表，上传文件的按钮，不出现在顶级目录，所以刷新下级就行
     * @param files
     */
    uploadSuccess(files) {
      this.getFileList(this.currentFolder)
    },
    refreshData() {
      if (this.top) {
        this.getFolderList()
      } else {
        this.getFileList(this.currentFolder)
      }
    },
    currentChange(current) {
      this.page.current = current
      this.refreshData()
    },
    goBefore(res) {
      this.currentFolder = res
      this.refreshData()
    },
    renameFolder(res) {
      this.rename = true
      this.title = '重命名文件夹'
      this.show = true
      this.showType = 1
      this.folderInfo = res
    },
    selectAll(res) {
      this.option.showCheckBox = res
    },
    selected(list) {
      this.selectedList = list
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  height: auto;
}
</style>