完成附件管理

yz

2021-02-19 e4d491c090560443addc95498de5a044261612da

完成附件管理

 src/settings.js

@@ -21,6 +21,8 @@
    // tx-manager控制台
    txUrl: 'http://localhost:8501/admin/index.html#/login',
    // 文件上传地址
    filesUploadUrl: 'http://120.24.23.155:8301/hr/filesUpload'
    filesUploadUrl: 'http://127.0.0.1:8301/hr/filesUpload',
    // 个人文件上传地址
    uploadSinglePath: 'http://127.0.0.1:8301/hr/empAccessory'
  }
}

 src/utils/request.js

@@ -8,7 +8,7 @@
import 'nprogress/nprogress.css'

// 请求超时时间，10s
const requestTimeOut = 10 * 1000
const requestTimeOut = 20 * 1000
const success = 200
// 更换令牌的时间区间
const checkRegion = 5 * 60 * 1000

 src/views/yunpan/fujian.vue

@@ -150,7 +150,7 @@
            <el-popconfirm title="是否删除标签？" @onConfirm="deldialogFormVisible = true">

              <el-button slot="reference" class="hr-but" type="danger">删除标签</el-button>

            </el-popconfirm>



            <el-button class="hr-but-all" type="danger" @click="downloaddialogFormVisible = true">下载附件</el-button>

            <el-dialog

              title="新建标签"

              :visible.sync="dialogFormVisible"

@@ -218,16 +218,51 @@
                >确 定</el-button>

              </div>

            </el-dialog>

            <el-button class="hr-but-all" type="danger" @click="downloadfj()">下载附件</el-button>

            <el-dialog title="附件管理" :visible.sync="dialogShowUploadfj" :fullscreen="true">

              <uploadfj @cancleChooseUser="cancleChooseUser()" />

            <el-dialog

              title="下载附件"

              :visible.sync="downloaddialogFormVisible"

              width="25%"

              class="add-label"

            >

              <el-form ref="dellabelform" :model="labelform" :rules="delrules">

                <el-form-item

                  label="标签名称:"

                  :label-width="formLabelWidth"

                  prop="labelid"

                >

                  <el-select v-model="labelform.labelid" placeholder="请选择标签名称">

                    <el-option

                      key="-1"

                      value="-1"

                      label="全部"

                    />

                    <el-option

                      v-for="item in labelData"

                      :key="item.labelid"

                      :value="item.labelid"

                      :label="item.labelname"

                    />

                  </el-select>

                </el-form-item>

              </el-form>

              <div slot="footer" class="dialog-footer">

                <el-button @click="downloaddialogFormVisible = false">取 消</el-button>

                <el-button

                  type="primary"

                  @click="downloadlabel('dellabelform')"

                >确 定</el-button>

              </div>

            </el-dialog>



          </el-col>

        </el-row>

      </el-header>

      <el-dialog title="附件管理" :visible.sync="dialogShowUploadfj" :fullscreen="true">

        <uploadfj v-if="dialogShowUploadfj" :rowitem="rowitem" @cancleChooseUser="cancleChooseUser()" />

      </el-dialog>

      <el-container>

        <el-main>

          <el-table :data="tableData" class="fj-table" style="width: 100%;height: 480px;color: #000;">

          <el-table ref="empAccessoryTable" :data="tableData" class="fj-table" style="width: 100%;height: 480px;color: #000;">

            <el-table-column

              type="selection"

              width="55"

@@ -237,7 +272,7 @@
                <el-button

                  type="text"

                  size="small"

                  @click.native.prevent="dialogShow(scope.$index, tableData)"

                  @click.native.prevent="dialogShow(scope.$index, scope.row)"

                >

                  上传

                </el-button>

@@ -277,6 +312,7 @@
  },

  data() {

    return {

      downloaddialogFormVisible: false,

      deldialogFormVisible: false,

      formLabelWidth: '100px',

      dialogFormVisible: false,

@@ -284,6 +320,7 @@
        labelname: '',

        labelid: '',

        labelcode: '',

        empIds: '',

        sort: 0

      },

      rules: {

@@ -359,7 +396,8 @@
      defaultProps: {

        children: 'children',

        label: 'label'

      }

      },

      rowitem: {}

    }

  },

  mounted() {

@@ -367,6 +405,32 @@
    this.fetch()

  },

  methods: {

    downloadlabel(formName) {

      this.$refs[formName].validate(valid => {

        if (valid) {

          var selected = this.$refs.empAccessoryTable.selection

          if (selected.length < 1) {

            this.$message({

              message: '请选择数据!',

              type: 'warning'

            })

            return

          }

          const empIds = []

          selected.forEach((j) => {

            empIds.push(j.empId)

          })

          this.labelform.empIds = empIds

          this.$download('hr/empAccessory/singledownload', { ...this.labelform }, '附件_' + new Date().getTime() + '.zip').then(() => {

            this.downloaddialogFormVisible = false

            this.$message({

              message: this.$t('下载成功'),

              type: 'success'

            })

          })

        }

      })

    },

    dellabel(formName) {

      this.$refs[formName].validate(valid => {

        if (valid) {

@@ -403,13 +467,8 @@
        }

      })

    },

    downloadfj() {

      this.$message({

        message: '下载成功!',

        type: 'success'

      })

    },

    dialogShow(index, tableData) {

      this.rowitem = tableData

      this.dialogShowUploadfj = true

    },

    cancleChooseUser() {

@@ -480,9 +539,6 @@
    },

    showEmpInfo() {

      this.dialogTableVisible = true

    },

    deleteRow(index, rows) {

      rows.splice(index, 1)

    }

  }

}


 src/views/yunpan/uploadfj.vue

@@ -1,7 +1,25 @@
<template>
  <div class="zs-main">
    <el-row class="search-title">
      <el-col :span="18" class="title">
        <div class="zs-title">上传附件</div>
      </el-col>
      <el-col :span="6" class="search">
        <el-input
          v-model="fileName"
          maxlength="20"
          minlength="1"
          clearable
          placeholder="请输入文件名"
          show-word-limit
          style="width:200px"
        />
        <el-button type="primary" @click="findFileByFileName()">查询</el-button>
      </el-col>
    </el-row>
    <el-container style="background-color: #fff;">
      <el-aside width="210px" style="background-color: #fff;text-align: center;">
        <h4>{{ rowitem.empName }}：{{ rowitem.deptName }}</h4>
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
@@ -49,9 +67,43 @@
                size="mini"
                @click="delFile()"
              >删除</el-button>
              <el-popconfirm title="是否移动标签？" @onConfirm="mvdialogFormVisible = true">
                <el-button slot="reference" class="hr-but" type="danger">移动</el-button>
              </el-popconfirm>
            </el-col>
          </el-row>
        </el-header>
        <el-dialog
          title="移动文件"
          :visible.sync="mvdialogFormVisible"
          width="25%"
          class="add-label"
          append-to-body
        >
          <el-form ref="mvlabelfrom" :model="labelfrom" :rules="mvrules">
            <el-form-item
              label="目录名称:"
              :label-width="formLabelWidth"
              prop="labelid"
            >
              <el-select v-model="labelfrom.labelid" placeholder="请选择移动的标签">
                <el-option
                  v-for="item in activities"
                  :key="item.id"
                  :value="item.id"
                  :label="item.timestamp"
                />
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="mvdialogFormVisible = false">取 消</el-button>
            <el-button
              type="primary"
              @click="mvlabel('mvlabelfrom')"
            >确 定</el-button>
          </div>
        </el-dialog>
        <el-main style="background-color: #fff;">
          <el-row v-for="(data, index) in filesUploadData" :key="index">
            <template v-for="(node, nodeIndex) in data.node">
@@ -73,7 +125,7 @@
                <el-card shadow="never">
                  <el-upload
                    class="avatar-uploader"
                    :action="filesUploadUrl"
                    :action="uploadSinglePath"
                    :show-file-list="false"
                    :before-upload="beforeAvatarUpload"
                    :headers="headers()"
@@ -101,78 +153,70 @@
import { pages } from '@/settings'

export default {
  props: {
    rowitem: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      filesUploadUrl: pages.filesUploadUrl,
      fileDate: {
        folderid: 0
      mvrules: {
        labelid: [{ required: true, message: '请选择标签', trigger: 'change' }]
      },
      folderform: {
        foldername: '',
        sort: 0
      mvdialogFormVisible: false,
      uploadSinglePath: pages.uploadSinglePath,
      labelfrom: {
        labelid: '',
        empId: this.rowitem.empId
      },
      fileDate: {
        labelid: 0,
        empId: this.rowitem.empId
      },
      formLabelWidth: '100px',
      beforeIndex: 0,
      fileName: '',
      checkedArr: [],
      checkAll: false,
      activities: [{
        timestamp: '记录截图',
        color: '#a32c30'
      }, {
        timestamp: '照片'
      }, {
        timestamp: '劳动合同'
      }, {
        timestamp: '身份证'
      }, {
        timestamp: '入职表'
      }, {
        timestamp: '体检表'
      }, {
        timestamp: '回执'
      }, {
        timestamp: '银行卡'
      }, {
        timestamp: '相关证件'
      }, {
        timestamp: '相关合同'
      }, {
        timestamp: '请假'
      }, {
        timestamp: '处罚'
      }, {
        timestamp: '辞职申请'
      }, {
        timestamp: '离职手续'
      }, {
        timestamp: '自离'
      }, {
        timestamp: '社保'
      }, {
        timestamp: '失业金'
      }, {
        timestamp: '意外险'
      }, {
        timestamp: '工伤'
      }, {
        timestamp: '劳资'
      }],
      activities: [],
      filesUploadData: [],
      updateNum: 0
    }
  },
  mounted() {
    this.initlabel()
  },
  methods: {
    async initlabel() {
      await this.$get('hr/label').then(r => {
        this.activities = []
        this.beforeIndex = 0
        r.data.data.forEach((v, i) => {
          if (i === 0) {
            this.activities.push({
              timestamp: v.labelname,
              id: v.labelid,
              color: '#a32c30'
            })
          } else {
            this.activities.push({ timestamp: v.labelname, id: v.labelid })
          }
        })
      })
      var params = { labelid: this.activities[this.beforeIndex].id,
        filesname: this.fileName,
        empid: this.rowitem.empId }
      this.initFile(params)
    },
    initFile(params) {
      var node = { node: [] }
      // 文件列表置为空
      this.filesUploadData = []
      this.checkedArr = []
      this.$get('hr/filesUpload', { ...params }).then(r => {
      this.$get('hr/empAccessory', { ...params }).then(r => {
        r.data.data.forEach((v, i) => {
          this.checkedArr.push({ isChecked: false, filesid: v.filesid })
          this.checkedArr.push({ isChecked: false, accessoryid: v.accessoryid })
          // 一行8个 等于8就换行
          if (i % 8 === 0 && i !== 0) {
            this.filesUploadData.push(node)
@@ -218,18 +262,12 @@
      // 将修改好的数组放回去
      this.activities = list
      this.checkAll = false
      var params
      if (this.fileName === '') {
        // 生成查询文件的条件
        params = { folderid: this.activities[index].id }
      } else {
        // 生成查询文件的条件
        params = {
          folderid: this.activities[this.beforeIndex].id,
          filesname: this.fileName
      var params = {
        labelid: this.activities[this.beforeIndex].id,
        filesname: this.fileName,
        empid: this.rowitem.empId
        }
      }

      this.initFile(params)
    },
    clickCard(index) {
@@ -299,7 +337,7 @@
      }
    },
    beforeAvatarUpload(file) {
      this.fileDate.folderid = this.activities[this.beforeIndex].id
      this.fileDate.labelid = this.activities[this.beforeIndex].id
      const isLt50M = file.size / 1024 / 1024 < 50
      if (!isLt50M) {
        this.$message.error('上传文件不能超过 50MB!')
@@ -327,8 +365,9 @@
        this.updateNum = 0
        // 生成查询文件的条件
        var params = {
          folderid: this.activities[this.beforeIndex].id,
          filesname: this.fileName
          labelid: this.activities[this.beforeIndex].id,
          filesname: this.fileName,
          empid: this.rowitem.empId
        }
        this.initFile(params)
      }
@@ -344,7 +383,7 @@
      var checke = []
      this.checkedArr.forEach((v, i) => {
        if (v.isChecked) {
          checke.push(v.filesid)
          checke.push(v.accessoryid)
        }
      })
      if (checke.length <= 0) {
@@ -354,8 +393,8 @@
        })
      } else {
        // 生成查询文件的条件
        var params = { fileids: checke.join(',') }
        this.$download('hr/filesUpload/download', { ...params }, new Date().getTime() + '.zip').then(() => {
        var params = { accessoryids: checke.join(',') }
        this.$download('hr/empAccessory/download', { ...params }, this.activities[this.beforeIndex].timestamp + '.zip').then(() => {
          this.$message({
            message: '下载成功!',
            type: 'success'
@@ -367,25 +406,83 @@
      var checke = []
      this.checkedArr.forEach((v, i) => {
        if (v.isChecked) {
          checke.push(v.filesid)
          checke.push(v.accessoryid)
        }
      })
      if (checke.length <= 0) {
        this.$message({
          message: '请选择需要删除的文件!',
          type: 'warning'
        })
      } else {
      // 生成查询文件的条件
      var params = { fileids: checke.join(',') }
      this.$delete('hr/filesUpload', { ...params }).then(() => {
        var params = { accessoryids: checke.join(',') }
        this.$delete('hr/empAccessory', { ...params }).then(() => {
        this.$message({
          message: '删除成功!',
          type: 'success'
        })
        // 生成查询文件的条件
        var initFileParams = {
          folderid: this.activities[this.beforeIndex].id,
          filesname: this.fileName
            labelid: this.activities[this.beforeIndex].id,
            filesname: this.fileName,
            empid: this.rowitem.empId
        }

        this.initFile(initFileParams)
      })
    }
    },
    findFileByFileName() {
      // 生成查询文件的条件
      var params = {
        filesname: this.fileName,
        empid: this.rowitem.empId
      }
      this.initFile(params)
    },
    mvlabel(formName) {
      if (this.labelfrom.labelid === this.activities[this.beforeIndex].id) {
        this.$message({
          message: '文件在同一目录!',
          type: 'warning'
        })
        return
      }
      var checke = []
      this.checkedArr.forEach((v, i) => {
        if (v.isChecked) {
          checke.push(v.accessoryid)
        }
      })
      if (checke.length <= 0) {
        this.$message({
          message: '请选择需要移动的文件!',
          type: 'warning'
        })
      } else {
        this.$refs[formName].validate(valid => {
          if (valid) {
            // 生成查询文件的条件
            var params = { accessoryids: checke.join(','), labelid: this.labelfrom.labelid, empId: this.labelfrom.empId }
            this.$post('hr/empAccessory/mvFiles', { ...params }).then(() => {
              this.$message({
                message: '移动成功!',
                type: 'success'
              })
              this.mvdialogFormVisible = false
              // 生成查询文件的条件
              var initFileParams = {
                labelid: this.activities[this.beforeIndex].id,
                filesname: this.fileName,
                empid: this.rowitem.empId
              }
              this.initFile(initFileParams)
            })
          }
        })
      }
    }
  }
}
</script>

 src/views/yunpan/zhishou.vue

@@ -20,21 +20,8 @@
    <el-container style="background-color: #fff;">
      <el-aside width="210px" style="background-color: #fff;text-align: center;">
        <el-button class="add-folder-but" @click="dialogFormVisible = true">新增</el-button>
        <el-button class="add-folder-but" @click="dialogDelVisible = true">删除</el-button>
        <el-dialog
          title="提示"
          :visible.sync="dialogDelVisible"
          width="20%"
        >
          <span>是否删除此目录?</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogDelVisible = false">取 消</el-button>
            <el-button type="primary" @click="delFolder()">确 定</el-button>
          </span>
        </el-dialog>

        <el-popconfirm title="是否删除此目录?">
          <el-button class="add-folder-but" @click="delFolder()">删除</el-button>
        <el-popconfirm title="是否删除目录？" @onConfirm="delFolder()">
          <el-button slot="reference" class="hr-but-all" type="danger">删除</el-button>
        </el-popconfirm>
        <el-dialog
          title="新增文件夹"
@@ -114,9 +101,42 @@
                size="mini"
                @click="delFile()"
              >删除</el-button>
              <el-popconfirm title="是否移动标签？" @onConfirm="mvdialogFormVisible = true">
                <el-button slot="reference" class="hr-but" type="danger">移动</el-button>
              </el-popconfirm>
            </el-col>
          </el-row>
        </el-header>
        <el-dialog
          title="移动文件"
          :visible.sync="mvdialogFormVisible"
          width="25%"
          class="add-label"
        >
          <el-form ref="mvfolderform" :model="folderform" :rules="mvrules">
            <el-form-item
              label="目录名称:"
              :label-width="formLabelWidth"
              prop="folderid"
            >
              <el-select v-model="folderform.folderid" placeholder="请选择移动的目录">
                <el-option
                  v-for="item in activities"
                  :key="item.id"
                  :value="item.id"
                  :label="item.timestamp"
                />
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="mvdialogFormVisible = false">取 消</el-button>
            <el-button
              type="primary"
              @click="mvfolder('mvfolderform')"
            >确 定</el-button>
          </div>
        </el-dialog>
        <el-main style="background-color: #fff;">
          <el-row v-for="(data, index) in filesUploadData" :key="index">
            <template v-for="(node, nodeIndex) in data.node">
@@ -168,13 +188,18 @@
export default {
  data() {
    return {
      mvrules: {
        folderid: [{ required: true, message: '请选择目录', trigger: 'change' }]
      },
      filesUploadUrl: pages.filesUploadUrl,
      fileDate: {
        folderid: 0
      },
      mvdialogFormVisible: false,
      dialogDelVisible: false,
      dialogFormVisible: false,
      folderform: {
        folderid: '',
        foldername: '',
        sort: 0
      },
@@ -463,6 +488,12 @@
          checke.push(v.filesid)
        }
      })
      if (checke.length <= 0) {
        this.$message({
          message: '请选择需要删除的文件!',
          type: 'warning'
        })
      } else {
      // 生成查询文件的条件
      var params = { fileids: checke.join(',') }
      this.$delete('hr/filesUpload', { ...params }).then(() => {
@@ -479,6 +510,48 @@
        this.initFile(initFileParams)
      })
    }
    },
    mvfolder(formName) {
      if (this.folderform.folderid === this.activities[this.beforeIndex].id) {
        this.$message({
          message: '文件在同一目录!',
          type: 'warning'
        })
        return
      }
      var checke = []
      this.checkedArr.forEach((v, i) => {
        if (v.isChecked) {
          checke.push(v.filesid)
        }
      })
      if (checke.length <= 0) {
        this.$message({
          message: '请选择需要移动的文件!',
          type: 'warning'
        })
      } else {
        this.$refs[formName].validate(valid => {
          if (valid) {
            // 生成查询文件的条件
            var params = { fileids: checke.join(','), folderid: this.folderform.folderid }
            this.$post('hr/filesUpload/mvFiles', { ...params }).then(() => {
              this.$message({
                message: '移动成功!',
                type: 'success'
              })
              this.mvdialogFormVisible = false
              // 生成查询文件的条件
              var initFileParams = {
                folderid: this.activities[this.beforeIndex].id,
                filesname: this.fileName
              }
              this.initFile(initFileParams)
            })
          }
        })
      }
    }
  }
}
</script>