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
            clearable
            placeholder="筛选项目阶段"
            style="width: 100%"
            @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" @on-success="uploadSuccess" />
            <el-button
              class="ml-10"
              type="primary"
              icon="Folder"
              :plain="!top"
              @click="showDialog(1)"
              >新建文件夹
            </el-button>
            <el-button type="primary" plain icon="User">批量授权</el-button>
            <filepicker
              class="ml-10"
              :project-id="folderInfo.projectId"
              :stage-id="folderInfo.stageId"
            />
          </div>
          <div class="flex flex-center">
            <span class="nowrap mr-10">文件搜索</span>
            <el-input
              v-model="folderInfo.keyword"
              placeholder="输入文件关键字"
              style="width: 100%"
            />
          </div>
        </div>
        <el-breadcrumb separator-icon="ArrowRight" class="mt-20 main-color">
          <el-breadcrumb-item>
            <div class="pointer" @click="getFolderList">全部文件</div>
          </el-breadcrumb-item>
        </el-breadcrumb>
        <xtable
          :data="data"
          :option="top ? option : option2"
          :loading="loading"
          :total="page.total"
          @row-click="getFileList"
          @current-change="currentChange"
        >
        </xtable>
      </div>
    </el-card>

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

<route>
{
name: '资料管理',
meta: { 'show': false }
}
</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 filepicker from '@/components/filepicker/index.vue'

export default {
  components: {
    tipsCustom,
    xtable,
    floder,
    uploadFile,
    filepicker
  },

  data() {
    return {
      show: false,
      showType: 1,
      width: 380,
      title: '新建文件夹',
      top: true,
      loading: false,
      currentFolder: null,
      data: [],
      option: {
        column: [
          {
            label: '名称',
            prop: 'title',
            display: false,
            width: 270
          },
          {
            label: '所属阶段',
            prop: 'stageName'
          },
          {
            label: '创建时间',
            prop: 'createTime'
          },
          {
            label: '归档位置',
            prop: 'roleName'
          },
          {
            label: '创建人',
            prop: 'createUserName'
          }
        ]
      },
      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()
  },
  methods: {
    showDialog(type) {
      this.showType = type
      this.show = true
    },
    folderAdd() {
      this.$api.resource.folderAddUpdate().then(res => {
        if (res.code === 200) {
          console.log(res)
        }
      })
    },
    closeDialog() {
      this.show = false
      if (this.top) {
        this.getFolderList()
      } else {
        this.getFileList()
      }
    },
    getFolderList() {
      const data = {
        stageId: this.folderInfo.stageId,
        dictKey: 1,
        current: this.page.current,
        size: this.page.size
      }
      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
          this.total = res.data.total
        }
      })
    },
    getFileList(row) {
      this.folderInfo = Object.assign(this.folderInfo, row)
      this.top = !this.top
      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
        } 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()
    },
    uploadSuccess(files) {
      console.log('refresh')
    },
    refreshData() {
      if (this.top) {
        this.getFolderList()
      } else {
        this.getFileList()
      }
    },
    currentChange(current) {
      this.page.current = current
      this.refreshData()
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  height: calc(100vh - 180px);
}
</style>