From 29b7f71737f273be190e04ebb02eb0d5e2467125 Mon Sep 17 00:00:00 2001
From: guoyuepeng <770272267@qq.com>
Date: Mon, 30 Dec 2024 14:07:59 +0800
Subject: [PATCH] =?UTF-8?q?1.=E5=AE=89=E7=9B=91=E9=83=A8=E4=BD=93=E7=B3=BB?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ajMfolder/index.vue | 625 ++++++++++++++++++++++++++++++++++
 1 file changed, 625 insertions(+)
 create mode 100644 src/views/ajMfolder/index.vue

diff --git a/src/views/ajMfolder/index.vue b/src/views/ajMfolder/index.vue
new file mode 100644
index 0000000..b6ad154
--- /dev/null
+++ b/src/views/ajMfolder/index.vue
@@ -0,0 +1,625 @@
+<template>
+  <div class="app-container">
+    <el-container>
+      <el-aside width="300px" style="background-color:#fff">
+        <el-tree v-loading="treeLoading" ref="tree" :data="treeData" :props="defaultProps" :filter-node-method="filterNode" class="filter-tree" accordion @node-click="handleNodeClick" />
+      </el-aside>
+      <el-main>
+        <div class="filter-container">
+          <el-button v-show="MFOLDER_ID != '0'" icon="el-icon-arrow-left" @click="getList(PARENT_ID)">返回</el-button>
+        </div>
+        <el-table v-loading="listLoading" ref="multipleTable" :data="varList" :row-key="getRowKey" :header-cell-style="{'font-weight': 'bold','color': '#000'}" tooltip-effect="dark" border fit highlight-current-row>
+          <el-table-column :reserve-selection="true" type="selection" width="55" align="center" />
+          <el-table-column type="index" label="序号" width="50" align="center" />
+          <el-table-column v-if="MFOLDER_ID =='0'" label="目录名" width="220">
+            <template slot-scope="{row}">
+              <div class="link-type" @click="getList(row.MFOLDER_ID)">
+                <svg-icon :icon-class="row.NAME" class-name="disabled" />{{ row.NAME }}<i class="el-icon-arrow-right" />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column v-if="MFOLDER_ID !='0'" label="文件名">
+            <template slot-scope="{row}">
+              {{ row.NAME }}
+              <a v-show="row.extension_name == '.txt'" style="color: #1e9fff" @click="goViewTxt(row.FILEPATH)">[预览]</a>
+              <a v-show="row.extension_name == '.pdf'" style="color: #1e9fff" @click="goViewPdf(row.FILEPATH)">[预览]</a>
+              <a v-show="row.extension_name == '.mp4'" style="color: #1e9fff" @click="goViewVideo(row.FILEPATH)">[预览]</a>
+              <a v-show="row.extension_name == '.doc' || row.extension_name == '.xls' || row.extension_name == '.ppt' || row.extension_name == '.docx' || row.extension_name == '.xlsx' || row.extension_name == '.pptx'" style="color: #1e9fff" @click="goOffice(row.FILEPATH)">[下載]</a>
+
+            </template>
+          </el-table-column>
+          <!--          <el-table-column prop="FILESIZE" label="文件大小" />-->
+          <el-table-column v-if="MFOLDER_ID !='0'" label="文件大小">
+            <template slot-scope="{row}">
+              {{ row.FILESIZE > 1024 ? ((((row.FILESIZE)/1024)+'').substring(0,(((row.FILESIZE)/1024)+'').lastIndexOf('.')+3))+' MB' : row.FILESIZE + ' KB' }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="CTIME" label="上传时间" />
+          <el-table-column prop="UNAME" label="上传者" />
+          <!--          <el-table-column label="是否共享">-->
+          <!--            <template slot-scope="{row}">-->
+          <!--              <span v-if="row.SHARE=='no'">私有文件</span>-->
+          <!--              <span v-else>公共文件</span>-->
+          <!--            </template>-->
+          <!--          </el-table-column>-->
+          <el-table-column prop="REMARKS" label="备注说明" show-overflow-tooltip />
+          <el-table-column label="操作" align="center" width="200">
+            <template slot-scope="{row}">
+              <el-button v-show="del && row.UNAME!='init'" type="danger" icon="el-icon-delete" plain @click="handleDelete(row.MFOLDER_ID,row.FILEPATH)">删除</el-button>
+              <el-button v-show="MFOLDER_ID !='0'" type="primary" icon="el-icon-edit" size="mini" style="color: white" @click="downloadFile(row.MFOLDER_ID)">下载</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="page-btn-group">
+          <div class="btn-only">
+            <el-button v-show="MFOLDER_ID == '0' && add" type="primary" icon="el-icon-plus" @click="handleAdd">新建文件夹</el-button>
+            <el-button v-show="MFOLDER_ID != '0' && add" type="primary" icon="el-icon-plus" @click="handleUpload">上传文件</el-button>
+            <el-button v-show="MFOLDER_ID != '0' && add" type="primary" icon="el-icon-plus" @click="handleBatchUpload">批量上传</el-button>
+          </div>
+          <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList(MFOLDER_ID)" />
+        </div>
+      </el-main>
+    </el-container>
+
+    <el-dialog :visible.sync="dialogForm" title="新建文件夹" width="600px">
+      <el-form ref="form" :model="form" :rules="rules" label-width="110px" style="width: 500px;">
+        <el-form-item label="文件夹名" prop="NAME">
+          <el-input v-model="form.NAME" placeholder="这里输入文件夹名..." />
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input :rows="3" v-model="form.REMARKS" type="textarea" placeholder="这里输入备注..." />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogForm = false">取 消</el-button>
+        <el-button type="primary" @click="confirm">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog :visible.sync="dialogFormUpload" title="上传文件" width="600px">
+      <el-form ref="uploadForm" :model="form" :rules="rules" label-width="110px" style="width: 500px;">
+        <el-form-item label="文件名" prop="NAME">
+          <el-input v-model="form.NAME" placeholder="这里输入名称..." />
+        </el-form-item>
+        <el-form-item label="附件">
+          <span v-if="form.FFILE">{{ form.FFILE.name }}</span>
+          <el-upload
+            :before-upload="beforeFileUpload"
+            :on-change="handleChangePDF"
+            :auto-upload="false"
+            class="avatar-uploader"
+            action="#">
+            <el-button type="primary">上传</el-button>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input :rows="3" v-model="form.REMARKS" type="textarea" placeholder="这里输入备注..." />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormUpload = false">取 消</el-button>
+        <el-button type="primary" @click="upload">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog :visible.sync="dialogBatchUpload" title="批量上传文件" width="600px">
+      <el-form ref="batchUploadForm" :model="form" label-width="110px" style="width: 500px;">
+
+        <el-form-item label="附件">
+
+          <el-upload
+            ref="batchUpload"
+            :on-preview="handlePreview"
+            :on-remove="handleRemove"
+            :on-change="handleChangePDF2"
+            :before-upload = "beforeFileUpload2"
+            :auto-upload="false"
+            class="upload-demo"
+            action="#">
+            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
+          </el-upload>
+          <!--          <el-upload :before-upload="beforeFileUpload" class="avatar-uploader" action="#">
+            <el-button type="primary">上传</el-button>
+          </el-upload>-->
+        </el-form-item>
+
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogBatchUpload = false">取 消</el-button>
+        <el-button type="primary" @click="batchUpload">确 定</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog :visible.sync="dialogViewTxt" title="文本文档" width="600px">
+      <el-input :rows="30" v-model="txtPre" readonly type="textarea" placeholder=""/>
+    </el-dialog>
+    <el-dialog :visible.sync="dialogViewPdf" title="文档">
+      <div>
+
+        <pdf
+          :page="pageNum"
+          :src="pdfUrl"
+          @progress="loadedRatio = $event"
+          @num-pages="pageTotalNum=$event"
+        />
+        <div style="text-align: center">
+          <div style="color: #409EFF;">{{ pageNum }} / {{ pageTotalNum }}</div>
+          <el-button-group style="padding-top: 10px;">
+            <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button>
+            <el-button type="primary" size="mini" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"/></el-button>
+          </el-button-group>
+        </div>
+      </div>
+    </el-dialog>
+
+    <el-dialog :visible.sync="dialogViewVideo" title="视频" width="600px">
+      <div>
+        <video-player
+          ref="videoPlayer"
+          :playsinline="true"
+          :options="playerOptions"
+          class="video-player vjs-custom-skin"/>
+      </div>
+    </el-dialog>
+
+  </div>
+
+</template>
+<script>
+import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
+import { requestFN } from '@/utils/request'
+import waves from '@/directive/waves' // waves directive  src/utils/src/utils/.js.js
+import { upload } from '@/utils/upload'
+import pdf from 'vue-pdf'
+import { Message } from 'element-ui'
+import { videoPlayer } from 'vue-video-player'
+import 'video.js/dist/video-js.css'
+export default {
+  components: { Pagination, pdf, videoPlayer },
+  directives: { waves },
+  data() {
+    return {
+      txtPre: '',
+      dialogFormUpload: false,
+      dialogForm: false,
+      listLoading: true,
+      treeLoading: false,
+      dialogBatchUpload: false,
+      add: false,
+      del: false,
+      edit: false,
+      listQuery: {
+        page: 1,
+        limit: 20
+      },
+      total: 0,
+      KEYWORDS: '',
+      varList: [],
+      pd: [],
+      form: {
+        NAME: '', //
+        FFILE: [],
+        REMARKS: ''
+      },
+      multipleSelectionAll: [], // 所有选中的数据包含跨页数据
+      multipleSelection: [], // 当前页选中的数据
+      dialogFormEdit: false,
+      rules: {
+        NAME: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
+      },
+      corpInfoId: '',
+      SHARE: 'no',
+      treeData: [],
+      defaultProps: {
+        children: 'nodes',
+        label: 'name'
+      },
+      MFOLDER_ID: '0',			// 主键ID
+      PARENT_ID: '0',				// 上级ID
+      serverurl: config.fileUrl,
+      dialogViewTxt: false,
+      dialogViewVideo: false,
+      dialogViewPdf: false,
+      dialogViewUrl: '',
+      // pdf预览
+      pdfUrl: '',
+      pageNum: 1,
+      pageTotalNum: 1, // 总页数
+      loadedRatio: 0, // 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
+      playerOptions: {
+        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
+        autoplay: false, // 如果为true,浏览器准备好时开始回放。
+        muted: false, // 默认情况下将会消除任何音频。
+        loop: false, // 是否视频一结束就重新开始。
+        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+        language: 'zh-CN',
+        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+        sources: [{
+          type: 'video/mp4', // 类型
+          src: 'https://qask.qhdsafety.com/file/uploadFiles/file/13cf0f4ec77e4d98ae8cdd9c3386ae0c/20210625/691910cd81024986a392f6203c4045f8.mp4' // url地址
+        }],
+        poster: '', // 封面地址
+        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
+        controlBar: {
+          timeDivider: true, // 当前时间和持续时间的分隔符
+          durationDisplay: true, // 显示持续时间
+          remainingTimeDisplay: false, // 是否显示剩余时间功能
+          fullscreenToggle: true // 是否显示全屏按钮
+        }
+      },
+      fileList: []
+    }
+  },
+  created() {
+    this.corpInfoId = this.$parent.indexVal
+    this.getList('0')
+    this.getDataTree()
+    this.urlToBlob()
+  },
+  methods: {
+
+    urlToBlob() {},
+    // 上一页
+    prePage() {
+      let page = this.pageNum
+      page = page > 1 ? page - 1 : this.pageTotalNum
+      this.pageNum = page
+    },
+
+    // 下一页
+    nextPage() {
+      let page = this.pageNum
+      page = page < this.pageTotalNum ? page + 1 : 1
+      this.pageNum = page
+    },
+    getRowKey(row) {
+      return row.MFOLDER_ID
+    },
+    // 搜索
+    getQuery() {
+      this.$refs.multipleTable.clearSelection()
+      this.getList('0')
+    },
+    // 获取列表
+    getList(F_ID) {
+      this.listLoading = true
+      this.MFOLDER_ID = F_ID
+      requestFN(
+        '/ajFfolder/list?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
+        {
+          KEYWORDS: this.KEYWORDS,
+          CORPINFO_ID: this.corpInfoId,
+          MFOLDER_ID: this.MFOLDER_ID,
+          SHARE: this.SHARE
+        }
+      ).then((data) => {
+        this.listLoading = false
+        this.varList = data.varList
+        this.PARENT_ID = data.PARENT_ID
+        this.total = data.page.totalResult
+        this.hasButton()
+      }).catch((e) => {
+        this.listLoading = false
+      })
+    },
+    // 添加
+    handleAdd() {
+      this.resetForm()
+      this.dialogForm = true
+    },
+    submitUpload() {
+      this.$refs.upload.submit()
+    },
+    handleRemove(file, fileList) {
+      console.log(1)
+
+      console.log(file, fileList)
+    },
+    handlePreview(file) {
+      console.log(file)
+    },
+    handleChangePDF(file, fileList) {
+      // const types = ['application/pdf']
+      // const isImage = types.includes(file.raw.type)
+      // if (!isImage) {
+      //   this.$message.error('上传文件只能是 PDF 格式!')
+      //   fileList.pop()
+      // } else {
+      //   this.form.FFILE = file.raw
+      // }
+      this.form.FFILE = file.raw
+    },
+    handleChangePDF2(file, fileList) {
+      // const types = ['application/pdf']
+      // const isImage = types.includes(file.raw.type)
+      // if (!isImage) {
+      //   this.$message.error('上传文件只能是 PDF 格式!')
+      //   fileList.pop()
+      // }
+
+    },
+    // 添加
+    handleUpload() {
+      this.resetForm()
+      this.dialogFormUpload = true
+    },
+    // 添加
+    handleBatchUpload() {
+      this.resetForm()
+      this.dialogBatchUpload = true
+    },
+    // beforeFileUpload2(file) {
+    //   console.info(this.fileList)
+    //   this.fileList.push(file)
+    //   this.$forceUpdate()
+    //   return false
+    // },
+    beforeFileUpload2(file) {
+      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
+      const extension = testmsg === 'pdf'
+      if (!extension) {
+        this.$confirm(`上传文件只能是pdf格式!`)
+      } else {
+        this.fileList.push(file)
+      }
+      this.$forceUpdate()
+      return false
+    },
+    beforeFileUpload(file) {
+      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
+      const extension = testmsg === 'pdf'
+      if (!extension) {
+        this.$confirm(`上传文件只能是pdf格式!`)
+      } else {
+        this.form.FFILE = file
+      }
+      this.$forceUpdate()
+      return false
+    },
+    // 保存
+    confirm() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          requestFN(
+            '/ajFfolder/add',
+            {
+              PARENT_ID: this.MFOLDER_ID,
+              NAME: this.form.NAME,
+              REMARKS: this.form.REMARKS
+            }
+          ).then((data) => {
+            this.$message({
+              message: '操作成功',
+              type: 'success'
+            })
+            this.dialogForm = false
+            this.getDataTree()
+            this.getList(this.MFOLDER_ID)
+          }).catch((e) => {
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    batchUpload() {
+      var _this = this
+
+      if (_this.$refs.batchUpload.uploadFiles.length < 1) {
+        Message({
+          message: '请上传附件',
+          type: 'error',
+          duration: 5 * 1000
+        })
+        return
+      }
+
+      _this.$refs.batchUpload.submit()
+      const loading = _this.$loading({
+        lock: true,
+        text: '上传中...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+      _this.form.PARENT_ID = _this.MFOLDER_ID
+      const formData = new FormData()
+      Object.keys(_this.form).map(key => {
+        formData.append(key, _this.form[key])
+      })
+      console.info(_this.fileList)
+      for (var i = 0; i < _this.fileList.length; i++) {
+        if (_this.fileList[i]) {
+          formData.append('FFILE', _this.fileList[i])
+        }
+      }
+      upload(
+        '/ajFfolder/batchUpload',
+        formData
+      ).then((data) => {
+        _this.fileList = []
+        _this.dialogBatchUpload = false
+        _this.getDataTree()
+        _this.getList(_this.MFOLDER_ID)
+        loading.close()
+      }).catch((e) => {
+        loading.close()
+      })
+    },
+    // 保存
+    upload() {
+      this.$refs.uploadForm.validate(valid => {
+        if (!this.form.FFILE) {
+          Message({
+            message: '请上传附件',
+            type: 'error',
+            duration: 5 * 1000
+          })
+          return
+        }
+        const loading = this.$loading({
+          lock: true,
+          text: '上传中...',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+        this.form.PARENT_ID = this.MFOLDER_ID
+        const formData = new FormData()
+        Object.keys(this.form).map(key => {
+          formData.append(key, this.form[key])
+        })
+        upload(
+          '/ajFfolder/upload',
+          formData
+        ).then((data) => {
+          this.dialogFormUpload = false
+          this.getDataTree()
+          this.getList(this.MFOLDER_ID)
+          loading.close()
+        }).catch((e) => {
+          loading.close()
+        })
+      })
+    },
+    handleNodeClick(node, data, value) {
+      this.getList(node.id)
+    },
+    handleDelete(id, FILEPATH) {
+      this.$confirm('确定要删除吗?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.listLoading = true
+        requestFN(
+          '/ajFfolder/delete',
+          {
+            MFOLDER_ID: id,
+            FILEPATH: FILEPATH || ''
+          }
+        ).then(() => {
+          this.$message({
+            message: '删除成功',
+            type: 'success'
+          })
+          this.listLoading = false
+          this.varList = []
+          this.listQuery.page = 1
+          this.getDataTree()
+          this.getList(this.MFOLDER_ID)
+        }).catch((e) => {
+          this.listLoading = false
+        })
+      }).catch(() => {
+      })
+    },
+
+    // 判断按钮权限，用于是否显示按钮
+    hasButton() {
+      var keys = 'mfolder:add,mfolder:del,mfolder:edit,toExcel'
+      requestFN(
+        '/head/hasButton',
+        {
+          keys: keys
+        }
+      ).then((data) => {
+        this.add = data.mfolderfhadminadd		// 新增权限
+        this.del = data.mfolderfhadmindel		// 删除权限
+        this.edit = data.mfolderfhadminedit	// 修改权限
+      }).catch((e) => {
+        this.listLoading = false
+      })
+    },
+    resetForm() {
+      this.form = {
+        form: {
+          NAME: '', //
+          FFILE: [],
+          REMARKS: ''
+        }
+      }
+    },
+    getDataTree() {
+      this.treeLoading = true
+      requestFN(
+        '/ajFfolder/listTree',
+        {
+          corpInfoId: this.corpInfoId
+        }
+      ).then((data) => {
+        this.treeLoading = false
+        this.treeData = JSON.parse(data.zTreeNodes)
+      })
+        .catch((e) => {
+          this.treeLoading = false
+        })
+    },
+    filterNode(value, data) {
+      if (!value) return true
+      return data.label.indexOf(value) !== -1
+    },
+    downloadFile(MFOLDER_ID) {
+      this.$confirm('确定要下载此文件吗?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.listLoading = false
+        // '/ajFfolder/download?MFOLDER_ID=' + MFOLDER_ID,
+        window.location.href = config.httpurl + 'mfolder/download?MFOLDER_ID=' + MFOLDER_ID
+      }).catch(() => {
+        this.listLoading = false
+      })
+      this.listLoading = false
+    },
+    // pdf 预览
+    goViewPdf(filePath) {
+      this.pageNum = 1
+      this.pdfUrl = this.serverurl + filePath
+      this.dialogViewPdf = true
+    },
+    // txt 预览
+    goViewTxt(filePath) {
+      const file_url = 'serverurl' + filePath
+      // 可以是具体.txt也可以是接口返回的blob，或者web转换
+      const xhr = new XMLHttpRequest()
+      xhr.open('get', file_url, true)
+      xhr.responseType = 'blob'
+      var self = this// onload this指向为window中转一下
+      this.loading = true
+      xhr.onload = function() {
+        if (this.status == 200) {
+          self.loading = false
+          console.log(this.response)
+          const reader = new FileReader()
+          reader.onload = function() {
+            self.txtPre = reader.result// 获取的数据data
+            self.dialogvisibleview = true
+            console.log('reader.result', reader.result)
+          }
+          reader.readAsText(this.response)
+        } else {
+          this.loading = false
+        }
+      }
+      xhr.send()
+
+      this.dialogViewTxt = true
+    },
+    goViewVideo(filePath) {
+      this.playerOptions.sources[0].src = 'serverurl' + filePath
+      this.playerOptions.sources[0].type = 'video/mp4'
+
+      this.dialogViewVideo = true
+    },
+    goOffice(filePath) {
+      window.open(config.fileUrl + filePath, '_blank').document.charset = 'UTF-8'
+    }
+  }
+}
+
+</script>
+<style lang="sass" scoped>
+.btn-only
+  .el-button+.el-button
+    margin-left: 0px
+</style>