wt_project_web_bak/src/views/company/index.vue

<template>
  <el-row :gutter="8" class='mt-10'>
    <el-col :span="4">
      <basic-container style='min-height: 720px;padding-left: 0'>
        <div class='full-width  flex flex-center flex-justify-between'>
          <span class='bold'>文件柜分类</span>
          <el-button type='primary' @click='addFolder'>新 增</el-button>
        </div>
        <el-divider/>
        <div class='flex flex-col flex-justify-start flex-align-start padding' style='min-height: 900px'>
          <span class=' full-width' v-for='(item,index) in folders' :key='item.id'>
            <div class='item full-width flex flex-col pointer' :class='active === index ? "item-selected":"" '
                 @click='changeFolder(index)'>
              {{ item.title }}
            </div>
          </span>
        </div>
      </basic-container>
    </el-col>
    <el-col :span="20">
      <basic-container class="grid-content bg-purple">
        <div class='flex flex-center flex-justify-between'>
          <div class='flex flex-center'>
            <base-button class="ml-20 " icon="Plus" title="上传文件"
                         @click="show = true"/>
            <base-button class="ml-20 " icon="Back" title="返回上一层"
                         v-if='currentFolder && currentFolder.parentId !== "0"'
                         @click="backFolder"/>
          </div>

          <div class='flex flex-center'>
            <base-button class="ml-20 " icon="Plus" title="授权"
                         @click="authorShow = true"/>
            <base-button class="ml-20 " icon="Plus" title="新建文件夹"
                         @click="addSubFolder"/>
          </div>
        </div>
        <basic-curd
            :option="option"
            :data="data"
            @row-view='rowDetail'
            @row-del="rowDel"
        ></basic-curd>
      </basic-container>
    </el-col>
    <!--    dialog-->
    <el-dialog v-model='show' title='上传文件'>
      <div>
        <el-upload
            drag
            :action="action"
            multiple
            accept='.doc,.docx,.pdf,.xls,.xlsx,.png,.jpg,.jpeg,.ppt,pptx'
            show-file-list
            :headers="{'Authorization':`Basic ${clientId}`}"
            :on-success='uploadSuccess'
        >
          <el-icon class="el-icon--upload">
            <upload-filled/>
          </el-icon>
          <div class="el-upload__text">
            拖拽或者 <em>点击上传文件</em>
          </div>
        </el-upload>
        <el-divider/>
        <div class='flex flex-justify-end'>
          <el-button @click='show = false'>取 消</el-button>
          <el-button type='primary' @click='saveFile'>确 定</el-button>
        </div>
      </div>
    </el-dialog>

    <el-image-viewer
        v-if='showImage'
        :url-list="imgList"
        @close='showImage = false'
    />
    <el-dialog v-model='authorShow' title='批量授权'>
      <authorize :list='data' :folder-id='currentFolder.id' :extra='{type:2}' :author-type='false' @close='authorShow = false'/>
    </el-dialog>
  </el-row>
</template>

<route>
{
name: '公司资料'
}
</route>

<script>
import BasicContainer from '@/components/basic-container/main.vue'
import baseButton from '@/components/base-button.vue'
import basicCurd from '@/components/basic-curd/index.vue'
import api from '@/api'
import authorize from '@/views/home/component/authorize.vue'
import { Base64 } from 'js-base64'
import website from '@/config/website.js'

export default {
  name: 'index',
  components: { BasicContainer, baseButton, basicCurd, authorize },
  data () {
    return {
      clientId: '',
      authorShow: false,
      showImage: false,
      imgList: [],
      folders: [],
      show: false,
      active: 0,
      form: {},
      data: [],
      action: api.uploadPath,
      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'
          }
        ]
      },
      currentFolder: null,
      lastParentFolder: [],
      page: {
        size: 10,
        current: 1,
        total: 0
      },
      fileList: []
    }
  },
  created () {
    this.clientId = Base64.encode(`${website.clientId}:${website.clientSecret}`)
    this.list()
  },
  methods: {
    list () {
      this.$api.company.list({ current: 1, size: 100, parentId: '' }).then(res => {
        if (res.code === 200) {
          this.folders = res.data.records
          if (this.folders.length > 0) {
            this.currentFolder = this.folders[0]
          }
          this.onLoad()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    addFolder () {
      this.$prompt('请输入分类名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        this.$api.company.submint({ title: value, type: 2 }).then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg)
            this.list()
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    },
    changeFolder (index) {
      this.active = index
      this.currentFolder = this.folders[index]
      this.page.current = 1
      this.onLoad()
    },
    onLoad () {
      const data = { parentId: this.currentFolder.id }
      this.$api.company.list(Object.assign(data, this.page)).then(res => {
        if (res.code === 200) {
          this.data = res.data.records
          this.page.total = res.data.total
        } else {
          this.$message.error(res.msg)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    rowSave (row, done, loading) {
      const data = {
        projectInfoId: this.info.id
      }
      this.$api.projects.meeting.save(Object.assign(row, data)).then((res) => {
        if (res.code === 200) {
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
        done(row)
        this.onLoad()
      }, error => {
        window.console.log(error)
        loading()
      })
    },
    rowUpdate (row, index, done, loading) {
      const data = {
        projectInfoId: this.info.id
      }
      this.$api.projects.meeting.update(Object.assign(row, data)).then((res) => {
        if (res.code === 200) {
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
        done(row)
        this.onLoad()
      }, error => {
        window.console.log(error)
        loading()
      })
    },
    rowDetail (row, index) {
      if (row.type === 1) {
        if (['pdf', 'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx'].includes(row.suffix)) {
          const routeData = this.$router.resolve({ path: '/home/file_detail', query: { id: row.fileId } })
          window.open(routeData.href, '_blank')
        } else {
          this.imgList = [row.url]
          this.showImage = true
        }
      } else {
        this.lastParentFolder = this.lastParentFolder.filter(sub => sub.id !== this.currentFolder.id)
        this.lastParentFolder.push(this.currentFolder)
        this.currentFolder = row
        this.onLoad()
      }
    },
    rowDel (row, index, done) {
      console.log(row, index, done)
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return this.$api.company.removeList({ ids: row.id })
      }).then(() => {
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
        // 数据回调进行刷新
        this.onLoad()
      }).catch(() => {
      })
    },
    uploadSuccess (res, file, files) {
      this.fileList = files.map(sub => sub.response.data)
    },
    saveFile () {
      if (this.fileList.length === 0) {
        return
      }
      this.fileList.forEach(sub => {
        if (api.offices.includes(sub.suffix)) {
          // save Library
          const data = {
            title: sub.originalFileName,
            fileId: sub.id,
            suffix: sub.suffix,
            volume: sub.volume,
            url: sub.filePath,
            category: 4,
            content: '',
            parentId: this.currentFolder.id
          }
          this.$api.common.submit(data).then(res => {
            if (res.code === 200) {
              this.addFile(this.currentFolder.id, sub, 1)
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          this.addFile(this.currentFolder.id, sub, 1)
        }
      })
    },
    /**
     * 保存文件
     * @param parentId
     * @param item
     * @param type 1 图片 2 文件夹
     */
    addFile (parentId, item, type) {
      const data = {
        title: item.originalFileName,
        parentId,
        fileId: item.id,
        suffix: item.suffix,
        volume: item.volume,
        url: item.filePath,
        type
      }
      this.$api.company.submint(data).then(res => {
        if (res.code === 200) {
          this.show = false
          this.onLoad()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    addSubFolder () {
      this.$prompt('请输入文件夹名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        const data = { parentId: this.currentFolder.id, title: value, type: 2 }
        this.$api.company.submint(data).then(res => {
          if (res.code === 200) {
            this.$message.success(res.msg)
            this.onLoad()
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    },
    backFolder () {
      this.currentFolder = this.lastParentFolder[this.lastParentFolder.length - 1]
      this.lastParentFolder = this.lastParentFolder.filter(sub => sub.id !== this.currentFolder.id)
      this.onLoad()
    }
  }
}
</script>

<style scoped>
.item {
  padding: 10px 5px;
  margin-bottom: 10px;
  border-radius: 8px;
  text-align: left;
  background-color: #E4E4E4;
}

.item:hover {
  background-color: #AB7630;
  color: white;
}

.item-selected {
  background-color: #AB7630;
  color: white;
}

.icon {
  width: 80px;
  height: 66px;
}
</style>