wt_project_web_bak/src/views/home/component/folder_info.vue

<template>
  <div class="flex flex-col white-bg">
    <div class="flex flex-center ml-20 mb-20 mt-10">
      <div class="flex flex-center" style="flex: 3">
        <span class="grey-6 bold nowrap mr-10">文件搜索</span>
        <el-select
            v-model="keyWords" remote filterable clearable
            placeholder="输入关键字"
            :remote-method="remoteMethod"
            :loading="loading"
            style="width: 100%"
            @change="result"
        >
          <el-option
              v-for="item in findData"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="flex flex-center ml-10" style="flex: 0.01">
        <!--              <base-button icon="Delete" title="清空" type="0" @click="clear"/>-->
        <!--              <base-button class="ml-10" @click="filesFind"/>-->
      </div>
    </div>
    <div style="background-color: #E4E4E4;height: 10px;width: 100%;margin-left: -10px"></div>
    <!------tab------>
    <div class="flex flex-center mt-15">
      <div class="flex flex-center" style="flex: 3.8">
        <div v-for="(item,index) in folderType" :key='item.id' class="flex flex-center tab">
          <el-badge :value='item.fileAmount' :hidden='item.fileAmount === 0'>
            <div :class="active === index ? 'tab-active' : ''"
                 @click="change(index,item.dictKey)">{{ item.dictValue }}
            </div>
          </el-badge>
        </div>
      </div>
      <div class="flex flex-center mr-5 " style="flex: 1.2">
        <base-button v-if='canCreateFolder' class="mr-20" icon="User" title="批量授权"
                     type="0" @click='authorizeShow = true'/>
        <base-button v-if='canCreateFolder' icon="Plus" title="添加文件夹" type="0"
                     @click="addShow = true"/>
        <!--        <base-button v-if='permissions.permissions.home_folders_apply' class="ml-10" icon="User" title="批量授权"/>-->
      </div>
    </div>
    <div class="mt-20">
<!--      <basic-curd-->
<!--        :data='folderList'-->
<!--        :option='option'-->
<!--      />-->
      <folder-list :folder="folderList" :total="total" :project-id='id' :owner-id='data.createUser' :dict-key="dictKey"
                   @delFolder="getFolderList" @change='changePage'/>
    </div>
<!--    新增文件夹-->
    <el-dialog v-model='addShow' append-to-body width='40%'>
      <div class="flex flex-col">
        <el-form ref="ruleFormRef"
                 :model="folderInfo"
                 class="demo-ruleForm"
                 label-width="120px"
                 status-icon>
          <el-form-item label="文件夹名称">
            <el-input
                v-model="folderInfo.title"
                placeholder="填写文件夹名称"
                style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="文件夹类型">
            <el-select
                v-model="dictKey"
                clearable
                placeholder="输入项目领域"
                style="width: 100%">
              <el-option
                  v-for="item in folderType"
                  :key="item.dictKey"
                  :label="item.dictValue"
                  :value="item.dictKey"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div class="full-width flex flex-center mt-10">
          <base-button icon="Lock" title="保存" type="1" @click="folderAdd"/>
        </div>
      </div>
    </el-dialog>
    <el-image-viewer
        v-if='showImage'
        :url-list="imgList"
        @close='viewerClose'
    />
    <!--    授权-->
    <el-dialog v-model='authorizeShow' append-to-body width='40%'>
      <authorize :list='folderList' @close='authorizeShow = false' :project-id='projectId' :extra='{type:1}'/>
    </el-dialog>
  </div>
</template>

<script>
import baseButton from '../../../components/base-button.vue'
import folderList from './folder_list.vue'
import permissionStore from '@/store/permission.js'
import authorize from '@/views/home/component/authorize.vue'
import basicCurd from '@/components/basic-curd/index.vue'

export default {
  name: 'right2',
  components: { baseButton, folderList, authorize },
  props: {
    data: {
      type: Object,
      default: null
    },
    projectStageId: String,
    id: String
  },
  watch: {
    projectStageId: {
      handler (val) {
        if (val) {
          this.getDict()
        }
      },
      immediate: true
    },
    authorizeShow: {
      handler (val) {
        console.log(val)
      },
      immediate: true
    }
  },
  setup () {
    const permissions = permissionStore()
    return { permissions }
  },
  data () {
    return {
      projectId: '',
      authorizeShow: false,
      loading: false,
      showImage: false,
      imgList: [],
      addShow: false,
      folderInfo: {
        title: '',
        stageId: '',
        projectId: '',
        parentId: '',
        dictKey: '',
        folderType: 1
      },
      keyWords: '',
      active: 0,
      folderType: [],
      folderList: [],
      total: '',
      dictKey: '',
      page: {
        current: 1,
        size: 10
      },
      findData: [],
      option: {
        align: 'center',
        menuAlign: 'center',
        menuWidth: 380,
        size: 'mini',
        addBtn: false,
        viewBtn: true,
        editBtn: false,
        refreshBtn: false,
        columnBtn: false,
        labelWidth: 140,
        border: true,
        column: [
          {
            label: '文件/文件夹名称',
            prop: 'title'
          },
          {
            label: '更新/上传时间',
            prop: 'updateTime'
          },
          {
            label: '文件',
            prop: 'updateTime'
          }
        ]
      },
      canCreateFolder: false
    }
  },
  created () {
    this.projectId = this.$route.query.id
    this.getFolderList()
    this.queryCreateFolder()
    this.$bus.on('reFolder', () => {
      console.log('reFolder')
      this.getFolderList()
    })
  },
  methods: {
    queryCreateFolder () {
      this.$api.project.queryCreateFolder({ projectId: this.projectId }).then(res => {
        if (res.code === 200) {
          console.log(res)
          this.canCreateFolder = res.data.status === 2
        } else {
          console.log(res)
        }
      })
    },
    getDict () {
      this.$api.project.folderType({ stageId: this.projectStageId }).then(res => {
        if (res.code === 200) {
          this.folderType = res.data
          this.change(0, this.folderType[0].dictKey)
        }
      })
    },
    change (index, key) {
      this.active = index
      this.dictKey = key
      this.getFolderList()
    },
    clear () {
      this.keyWords = ''
      this.getFolderList()
    },
    getFolderList () {
      const data = {
        stageId: this.projectStageId,
        folderName: this.keyWords,
        dictKey: this.dictKey
      }
      this.$api.project.folderList(Object.assign(data, this.page)).then(res => {
        if (res.code === 200) {
          this.folderList = res.data.records.map(sub => {
            const item = sub
            item.title = sub.title
            return item
          })
          this.total = res.data.total
        }
      })
    },
    remoteMethod (query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          const data = {
            projectId: this.id,
            keyword: query
          }
          this.$api.project.findFiles(Object.assign(data, this.page)).then(res => {
            if (res.code === 200) {
              this.findData = res.data.map(sub => {
                const dataItem = {}
                dataItem.label = sub.title
                if (['png', 'jpg', 'jpeg'].includes(sub.suffix)) {
                  dataItem.value = sub.url
                } else {
                  dataItem.value = sub.fileId
                }
                return dataItem
              })
            }
            this.loading = false
          })
        }, 200)
      } else {
        this.findData = []
      }
    },
    result (res) {
      if (res.indexOf('http') > -1) {
        this.showImage = true
        this.imgList.push(res)
      } else {
        this.$router.push('/home/file_detail?id=' + res)
      }
    },
    viewerClose () {
      this.showImage = false
      this.imgList = []
    },
    folderAdd () {
      this.folderInfo.projectId = this.id
      this.folderInfo.stageId = this.projectStageId
      this.folderInfo.dictKey = this.dictKey
      this.folderInfo.parentId = 0
      this.$api.project.folderAdd(this.folderInfo).then(res => {
        if (res.code === 200) {
          this.addShow = false
          this.$message.success(res.msg)
          this.getFolderList()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    changePage (page) {
      console.log(page)
      this.page.current = page
      this.getFolderList()
    }
  }
}
</script>

<style lang="scss" scoped>
.tab {
  width: 150px;
  height: 38px;
  background-color: #EDF0F3;
  padding: 2px 10px;
  color: #707070;
  font-size: 13px;
}

.tab:first-child {
  border-radius: 20px 0 0 20px;
}

.tab:last-child {
  border-radius: 0 20px 20px 0;
}

.tab-active {
  width: 130px;
  flex-wrap: nowrap;
  color: white;
  font-size: 15px;
  background-color: #AB7630;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 20px;
}
</style>