2021/8/11 zhangyan

1.文件上传下载
2.文件预览

src/views/energyOperationSupport/components/securitys/SecurityFile.vue

@@ -74,12 +74,12 @@
                                 </el-form-item>
                             </el-col>
                             <el-col :span="8">
-                                <el-form-item label="文件类型">
+                                <el-form-item label="文件分类">
                                     <el-select
                                         filterable
                                         clearable
                                         v-model="filterForm.data.securityTypeid"
-                                        placeholder="文件类型"
+                                        placeholder="文件分类"
                                         style="width: 100%;"
                                     >
                                         <el-option
@@ -91,6 +91,26 @@
                                     </el-select>
                                 </el-form-item>
                             </el-col>
+                            <el-col :span="8">
+                                <el-form-item label="文件标签">
+                                    <el-select
+                                        filterable
+                                        clearable
+                                        multiple
+                                        allow-create
+                                        v-model="filterForm.data.securityTag"
+                                        placeholder="文件标签"
+                                        style="width: 100%;"
+                                    >
+                                        <el-option
+                                            v-for="(item,key) in nameObj.securityTag.arr"
+                                            :key="key"
+                                            :value="item"
+                                            :label="item"
+                                        ></el-option>
+                                    </el-select>
+                                </el-form-item>
+                            </el-col>
                         </el-row>
                     </el-form>
                     <div class="box-top-gjl">
@@ -124,25 +144,19 @@
                         <el-button
                         style="margin-left: 10px;"
                         size="small" type="success"
+                        v-privilege="activeMenu + 'UPLOAD'"
                         @click="submitUpload"
                         >上传到服务器
                         </el-button>
-                        <el-button
-                        class="button"
-                        type="primary"
-                        size="mini"
-                        icon="el-icon-download"
-                        v-privilege="activeMenu + 'DOWNLOAD'"
-                        >点击下载
-                        </el-button>
-                        <!-- <el-form ref="form" :model="form" label-width="120px" style="width: 50%">
-                        <el-form-item label="保存至文件夹">
-                            <input type="file" id="file" hidden @change="fileChange" webkitdirectory>
-                            <el-input placeholder="请输入内容" v-model="form.imgSavePath" class="input-with-select">
-                            <el-button slot="append" icon="el-icon-folder" type="success" @click="btnChange"></el-button>
-                            </el-input>
-                        </el-form-item>
-                        </el-form> -->
+                        <el-button
+                            class="button"
+                            type="danger"
+                            size="mini"
+                            icon="el-icon-delete"
+                            v-privilege="activeMenu + 'DELETE'"
+                            @click="but_del_plural()"
+                            :loading="loading"
+                        >删除</el-button>
                         <div style="float:right; text-align: right;">
                             <el-button
                                 class="button"
@@ -195,55 +209,95 @@
                                 sortable
                                 prop="fileName"
                                 label="文件名称"
-                                min-width="100px"
+                                width="160px"
                                 :show-overflow-tooltip="true"
                             ></el-table-column>
                              <el-table-column
                                 sortable
                                 prop="fileUrl"
                                 label="文件路径"
-                                min-width="100px"
+                                width="320px"
                                 :show-overflow-tooltip="true"
                             ></el-table-column>
                             <el-table-column
                                 sortable
                                 prop="type"
                                 label="所属类别"
-                                min-width="100px"
+                                width="100px"
                                 :show-overflow-tooltip="true"
                             >
                                 <template slot-scope="scope">
                                     <span>{{ nameObj.securityType.obj[scope.row.type] ? nameObj.securityType.obj[scope.row.type] : scope.row.type }}</span>
                                 </template>
                             </el-table-column>
+                            <el-table-column
+                                sortable
+                                prop="fileType"
+                                label="文件标签"
+                                width="320px"
+                                :show-overflow-tooltip="true"
+                            > <template slot-scope="scope">
+                                      <el-tag
+                                        effect="dark"
+                                        :disable-transitions="true"
+                                        v-for="(tag,key) in scope.row.fileType"
+                                        :key="key"
+                                        size="small">
+                                        {{ tag }}
+                                      </el-tag>
+                                </template>
+                            </el-table-column>
                             <el-table-column
                                 sortable
                                 prop="uploadTime"
                                 label="上传时间"
-                                min-width="100px"
+                                width="160px"
                                 :show-overflow-tooltip="true"
                             ></el-table-column>
                             <el-table-column
                                 sortable
                                 prop="createMan"
                                 label="上传人"
-                                min-width="100px"
+                                width="100px"
                                 :show-overflow-tooltip="true"
                             ></el-table-column>
                             <el-table-column
                                 sortable
                                 prop="updateMan"
                                 label="修改人"
-                                min-width="100px"
+                                width="100px"
                                 :show-overflow-tooltip="true"
                             ></el-table-column>
                             <el-table-column
                                 sortable
                                 prop="updateTime"
                                 label="修改时间"
-                                min-width="100px"
+                                width="160px"
                                 :show-overflow-tooltip="true"
                             ></el-table-column>
+                            <el-table-column
+                            label="操作"
+                            width="200px"
+                            fixed="right"
+                            ><template slot-scope="scope">
+                            <el-button
+                            size="small"
+                            type="primary"
+                            icon="el-icon-download"
+                            v-privilege="activeMenu + 'DOWNLOAD'"
+                            @click="downloadFile(scope.row)"
+                            >点击下载
+                            </el-button>
+                            <el-button
+                            size="small"
+                            type="primary"
+                            icon="el-icon-view"
+                            v-privilege="activeMenu + 'PREVIEW'"
+                            @click="preview(scope.row)"
+                            >预览
+                            </el-button>
+                            </template>
+                            </el-table-column>
                         </el-table>
                     </el-form>
                     <el-pagination
@@ -259,6 +313,14 @@
                 </div>
             </div>
         </div>
+        <el-dialog
+          title="文件预览"
+          :visible.sync="dialogVisible"
+          destroy-on-close
+          width="90%"
+          top="10vh">
+          <iframe :src="previewUrl" width="100%" :height="singleTableHeight"></iframe>
+        </el-dialog>
         <el-dialog
             :title="'计划工序与产品关联 - ' + (dialog.editorBox.type === 'add' ? '新增' : '修改')"
             :visible.sync="dialog.editorBox.show"
@@ -288,10 +350,10 @@
                                     :disabled="dialog.editorBox.type !== 'add'"
                                 >
                                     <el-option
-                                        v-for="item of nameObj.uploadFile.arr"
-                                        :key="item.id"
-                                        :value="item.id"
-                                        :label="item.name"
+                                        v-for="(item,key) in nameObj.uploadFile.arr"
+                                        :key="key"
+                                        :value="item"
+                                        :label="item"
                                     ></el-option>
                                 </el-select>
                             </el-form-item>
@@ -423,6 +485,7 @@
 import formulaEditor from '@/components/zg/formulaEditor.vue';
 import { zCheckNumber1 } from '@/utils/validator.js';
 import { formatDate } from '@/utils/util.js';
+import store from '@/store/index.js';
 export default {
     name: 'planProcessAndProduct',
     components: {
@@ -441,6 +504,7 @@ export default {
                 data: {
                     uploadFileid: '',
                     securityTypeid: '',
+                    securityTag: '',
                     isprimary: '',
                     version: formatDate(new Date(), 'yyyyMM00'),
                     fileName: ''
@@ -477,6 +541,14 @@ export default {
                 unitid: {
                     obj: {},
                     arr: []
+                },
+                roleList: {
+                    obj: {},
+                    arr: []
+                }, // 角色信息
+                securityTag: {
+                    obj: {},
+                    arr: []
                 }
             },
             loading: false,
@@ -520,7 +592,13 @@ export default {
                         }
                     }
                 }
-            }
+            },
+            store,
+            userInfo: {}, // 用户信息
+            qrRole: [],
+            userRoles: [],
+            dialogVisible: false,
+            previewUrl: ''
         }
     },
     created () {
@@ -545,11 +623,12 @@ export default {
                 that.singleTableHeight = that.getRoleHeight(that.$refs['singleTable'].$el) - 45;
             }, 1);
         });
-        that.getNodeData();
-        that.getNodeTreeData();
+        // that.getNodeData();
+        // that.getNodeTreeData();
         that.getUploadFileData();
         that.getUnitIdData();
-        that.getTableData();
+        // that.getTableData();
+        that.getRoles();
     },
     methods: {
         //  计算树区域高度
@@ -559,7 +638,7 @@ export default {
         // 获取文件类型列表
         getNodeData () {
             let that = this
-            let url = 'pass/ems/v1/securitytypes/getIdAndName';
+            let url = 'pass/ems/v1/securitytypes/getIdAndName/?securityInfo=' + that.qrRole;
             that.axios.get(url)
                 .then(function (res) {
                     if (res.code === '0') {
@@ -583,7 +662,7 @@ export default {
         // 获取工序节点树(产出)
         getNodeTreeData () {
             let that = this
-            let url = 'pass/ems/v1/securitytypes/gettree/';
+            let url = 'pass/ems/v1/securitytypes/gettree/?securityInfo=' + that.qrRole;
             that.listTopicTree.loading = true;
             that.axios.get(url)
                 .then(function (res) {
@@ -593,10 +672,13 @@ export default {
                             securityName: '所有记录',
                             children: res.data
                         }];
+                        that.getTableData();
                     } else {
                         that.$message.error(res.message);
                     }
                     that.listTopicTree.loading = false;
+                }).catch(function () {
+                    that.listTopicTree.loading = false;
                 });
         },
         // 获取产品
@@ -653,29 +735,55 @@ export default {
             let that = this,
                 params = {
                     fileName: that.filterForm.data.fileName,
-                    type: that.filterForm.data.securityTypeid
+                    type: that.filterForm.data.securityTypeid,
+                    fileType: that.filterForm.data.securityTag.toString()
                 };
             that.pageNum = pageNum || that.pageNum;
             that.tableLoading = true;
-            let url = 'pass/ems/v1/uploadfiles/?pageNum=' + that.pageNum + '&pageSize=' + that.pageSize;
+            let url = 'pass/ems/v1/uploadfiles/like/?pageNum=' + that.pageNum + '&pageSize=' + that.pageSize;
             that.axios.get(url, {
                 params: params
             })
                 .then(function (res) {
                     if (res.code === '0') {
                         let arr = [];
+                        let map = {};
+                        let fileTypeArr = [];
+                        let fileTypeStr = '';
+                        let total = 0;
+                        for (let item of that.listTopicTree.data[0].children) {
+                            map[item.id] = true;
+                        }
                         for (let item of res.data.list) {
+                            let result = true;
+                            fileTypeArr = [];
+                            // result = item.type.some(i => map[i]);
+                            if (that.qrRole.length > 0) {
+                                result = map.hasOwnProperty(item.type);
+                            }
+                            if (result) {
+                                if (item.fileType !== null) {
+                                    fileTypeArr = item.fileType.split(';');
+                                    fileTypeStr += item.fileType + ';'
+                                }
+                                total++;
                             arr.push({
-                                ID: item.fileName,
+                                ID: item.id,
                                 fileName: item.fileName,
                                 fileUrl: item.fileUrl,
                                 type: item.type,
+                                fileType: fileTypeArr,
                                 uploadTime: item.uploadTime,
                                 createMan: item.createMan,
                                 createTime: item.createTime,
                                 updateMan: item.updateMan,
                                 updateTime: item.updateTime
                             })
+                            }
+                        }
+                        if (that.nameObj.securityTag.arr.length <= 0) {
+                            fileTypeStr = fileTypeStr.substr(0, fileTypeStr.length - 1);
+                            that.nameObj.securityTag.arr = Array.from(new Set(fileTypeStr.split(';')));
                         }
                         that.tableData = arr;
                         that.total = res.data.total;
@@ -820,15 +928,17 @@ export default {
             let that = this;
             if (that.multipleSelection.length > 0) {
                 let ids = [];
+                let paths = [];
                 for (let item of that.multipleSelection) {
-                    ids.push(item.itemid);
+                    ids.push(item.ID);
+                    paths.push(item.fileUrl);
                 }
                 that.$confirm('是否删除已选数据?', '提示', {
                     confirmButtonText: '确定',
                     cancelButtonText: '取消',
                     state: 'warning'
                 }).then(() => {
-                    that.axios.delete('pass/ems/v1/trmworkprocproducts/' + ids.toString())
+                    that.axios.delete('pass/ems/v1/uploadfiles/' + ids.toString())
                         .then(function (res) {
                             if (res.code === '0') {
                                 that.$message({
@@ -850,55 +960,6 @@ export default {
                 this.$message.error('至少要选择一条数据');
             }
         },
-        fileChange (e) {
-      try {
-        const fu = document.getElementById('file')
-        if (fu == null) return
-        this.form.imgSavePath = fu.files[0].path
-        console.log(fu.files[0].path)
-      } catch (error) {
-        console.debug('choice file err:', error)
-      }
-    },
-    btnChange () {
-      var file = document.getElementById('file')
-      file.click()
-    },
-        // but_edit (row) {
-        //     let that = this;
-        //     that.dialog.editorBox.form.data.itemid = row.itemid;
-        //     that.dialog.editorBox.form.data.productid = row.productid;
-        //     that.dialog.editorBox.form.data.workprocid = row.workprocid;
-        //     that.dialog.editorBox.form.data.isprimary = row.isprimary;
-        //     that.dialog.editorBox.form.data.unitid = row.unitid;
-        //     that.dialog.editorBox.form.data.seqno = row.seqno;
-        //     that.dialog.editorBox.form.data.code = row.code;
-        //     that.dialog.editorBox.type = 'edit';
-        //     that.dialog.editorBox.show = true;
-        // },
-        // but_del (row) {
-        //     let that = this;
-        //     that.$confirm('是否删除该条数据?', '提示', {
-        //         confirmButtonText: '确定',
-        //         cancelButtonText: '取消',
-        //         state: 'warning'
-        //     }).then(() => {
-        //         that.axios.delete('pass/ems/v1/trmworkprocproducts/' + row.itemid)
-        //             .then(function (res) {
-        //                 if (res.code === '0') {
-        //                     that.$message({
-        //                         message: '删除成功',
-        //                         type: 'success'
-        //                     });
-        //                     that.getTableData();
-        //                 } else {
-        //                     that.$message.error(res.message);
-        //                 }
-        //             }).catch(function () {
-        //             });
-        //     }).catch(() => {
-        //     });
-        // },
         dataSave () {
             let that = this;
             let SubmitData = {
@@ -965,6 +1026,166 @@ export default {
             let that = this;
             that.filterForm.data.securityTypeid = data.id;
             that.getTableData(1);
+        },
+        getRoles () {
+            let that = this;
+            // 获取用户信息
+            this.store.dispatch('getUserInfo').then((res) => {
+                this.userInfo = res.data;
+                that.axios.get('pass/v1/sysuserroles/?userId=' + res.data.userId + '&pageNum=1&pageSize=100').then(rest => {
+                  if (rest) {
+                    for (let i = 0; i < rest.data.list.length; i++) {
+                      that.qrRole.push(rest.data.list[i].roleId)
+                    }
+                    that.userRoles = rest.data.list; // 获取用户角色关联信息
+                  }
+                  that.getNodeData();
+                  that.getNodeTreeData();
+                })
+            });
+            // 获取角色信息
+            this.store.dispatch('system/rolesManage/list').then(res => {
+              if (res.code === '0') {
+                this.nameObj.roleList.arr = res.data;
+                for (let obj of res.data) {
+                    this.nameObj.roleList.obj[obj.id] = {
+                        name: obj.roleName,
+                        id: obj.id
+                    };
+                }
+                } else {
+              this.$message.error(res.message);
+            }
+            });
+        },
+        downloadFile (data) {
+            let that = this;
+            let SubmitData = {
+                    fileName: data.fileName,
+                    fileUrl: data.fileUrl
+                };
+                // 不带token访问方式，留底后端修改shiroconfig.java,application.properties
+            //     let url = '/zhongsteel.pass.web/pass/ems/v1/uploadfiles/downloadFile/?fileName=' + that.tableFormDataObj[key].fileName + '&fileUrl=' + that.tableFormDataObj[key].fileUrl;
+            // const xhr = new XMLHttpRequest();
+            // xhr.open('GET', url, true);
+            // xhr.responseType = 'blob';
+            // xhr.onload = () => {
+            //     if (xhr.status === 200) {
+            //         var fileName = that.tableFormDataObj[key].fileName;
+            //         // 获取文件blob数据并保存
+            //         that.saveAs(xhr.response, fileName);
+            //     }
+            // };
+            // xhr.send();
+                let urla = 'pass/ems/v1/uploadfiles/downloadFile/';
+                that.axios.get(urla, {
+                params: SubmitData,
+                responseType: 'blob'
+            }).then(function (res) {
+                   that.saveAs(res, data.fileName);
+                   that.$message({
+                       message: '下载成功',
+                       type: 'success'
+                   });
+                }).catch(function () {
+                    that.$message.error('下载失败');
+                })
+        },
+        // js实现文件下载而不直接打开
+        saveAs (data, fileName) {
+            let urlObject = window.URL || window.webkitURL || window;
+            // 将二进制流转为blob
+            let exportBlob = new Blob([data]);
+            if (typeof window.navigator.msSaveBlob !== 'undefined') {
+              // 兼容IE，window.navigator.msSaveBlob：以本地方式保存文件
+              window.navigator.msSaveBlob(exportBlob, decodeURI(fileName));
+            } else {
+                // 创建新的URL并指向File对象或者Blob对象的地址
+                let blobURL = urlObject.createObjectURL(exportBlob);
+                let saveLink = document.createElement('a');
+                // 兼容：某些浏览器不支持HTML5的download属性
+                if (typeof saveLink.download === 'undefined') {
+                  saveLink.setAttribute('target', '_blank');
+                } else {
+                    saveLink.download = fileName;
+                }
+                // 创建新的URL并指向File对象或者Blob对象的地址
+                saveLink.href = blobURL;
+                saveLink.click();
+                // 释放blob URL地址
+                urlObject.revokeObjectURL(exportBlob);
+                // let blob = new Blob([data])
+                // let fileURL = urlObject.createObjectURL(blob);
+                // 下载代码
+                // let downEle = document.createElement('a')
+                // let fname = `download` //下载文件的名字
+                // downEle.href = fileURL
+                // downEle.setAttribute('download', fname)
+                // document.body.appendChild(downEle)
+                // downEle.click()
+                // window.open(fileURL);
+            }
+        },
+        preview (data) {
+            let that = this;
+            let SubmitData = {
+                fileName: data.fileName,
+                fileUrl: data.fileUrl
+            };
+            let urla = 'pass/ems/v1/uploadfiles/getfile/';
+            let type = 'text/html';
+            let responseType = 'application/json';
+            let fileExtension = data.fileName.substring(data.fileName.lastIndexOf('.') + 1);
+            if (fileExtension === 'pdf') {
+                urla = 'pass/ems/v1/uploadfiles/downloadFile/';
+                type = 'application/pdf';
+                responseType = 'blob';
+            }
+            that.tableLoading = true;
+            that.axios.get(urla, {
+                params: SubmitData,
+                responseType: responseType
+            }).then(function (res) {
+              let urlObject = window.URL || window.webkitURL || window;
+              // 将二进制流转为blob
+              let blob = new Blob([res], {type: type});
+              if (fileExtension !== 'pdf') {
+                  blob = new Blob([res.data], {type: type});
+                }
+              // if (typeof window.navigator.msSaveBlob !== 'undefined') {
+              //   // 兼容IE，window.navigator.msSaveBlob：以本地方式保存文件
+              //   window.navigator.msSaveBlob(blob, decodeURI(fileName))
+              // } else {
+                // 创建新的URL并指向File对象或者Blob对象的地址
+                let blobURL = urlObject.createObjectURL(blob);
+                that.dialogVisible = true;
+                that.previewUrl = blobURL;
+                that.tableLoading = false;
+                // 'https://file.keking.cn/onlinePreview?url=' + encodeURIComponent(blobURL)
+                // http://view.officeapps.live.com/op/view.aspx?src' + blobURL;
+                // 创建a标签，用于跳转至下载链接
+                // let tempLink = document.createElement('a')
+                // tempLink.style.display = 'none'
+                // tempLink.href = blobURL;
+                // tempLink.setAttribute('download', decodeURI(fileName))
+                // 兼容：某些浏览器不支持HTML5的download属性
+                // if (typeof tempLink.download === 'undefined') {
+                //   tempLink.setAttribute('target', '_blank')
+                // }
+                // // 挂载a标签
+                // document.body.appendChild(tempLink)
+                // tempLink.click()
+                // // 销毁a标签
+                // document.body.removeChild(tempLink)
+                // 释放blob URL地址
+                // urlObject.revokeObjectURL(blobURL);
+                setTimeout(() => {
+                    urlObject.revokeObjectURL(blobURL);
+                }, 1000)
+            }).catch(function () {
+                that.tableLoading = false;
+                that.$message.error('预览失败');
+            })
         }
     }
 }

src/views/energyOperationSupport/components/securitys/Securitys.vue

@@ -709,7 +709,7 @@ export default {
             }, 1);
         });
         that.getRoles();
-        that.getNodeData();
+        // that.getNodeData();
         // that.getNodeTreeData();
         // that.getTableData();
     },
@@ -721,7 +721,7 @@ export default {
         // 获取工序列表
         getNodeData () {
             let that = this
-            let url = 'pass/ems/v1/securitytypes/getIdAndName';
+            let url = 'pass/ems/v1/securitytypes/getIdAndName/?securityInfo=' + that.qrRole;
             that.axios.get(url)
                 .then(function (res) {
                     if (res.code === '0') {
@@ -775,7 +775,7 @@ export default {
             that.pageNum = pageNum || that.pageNum;
             that.tableLoading = true;
             that.dialog.editorBox.form.default.parentid = that.filterForm.data.parentid;
-            let url = 'pass/ems/v1/securitytypes/like/?pageNum=' + that.pageNum + '&pageSize=' + that.pageSize + '&Info=' + that.qrRole;
+            let url = 'pass/ems/v1/securitytypes/like/?pageNum=' + that.pageNum + '&pageSize=' + that.pageSize + '&securityInfo=' + that.qrRole;
             that.axios.get(url, {
                 params: params
             })
@@ -784,11 +784,11 @@ export default {
                         let arr = [];
                         let tagData = [];
                         let infoArr = [];
-                        let map = {};
-                        let total = 0;
-                        for (var key of that.qrRole) {
-                            map[key] = true;
-                        }
+                        // let map = {};
+                        // let total = 0;
+                        // for (var key of that.qrRole) {
+                        //     map[key] = true;
+                        // }
                         // let map = that.qrRole.reduce(i => (r[i] = true));
                         for (let item of res.data.list) {
                             tagData = [];
@@ -799,9 +799,11 @@ export default {
                             }
                             if (item.securityInfo !== null) {
                             infoArr = item.securityInfo.split(',');
-                            result = infoArr.some(i => map[i]);
+                            // if (that.qrRole.length > 0) {
+                            // result = infoArr.some(i => map[i]);
+                            //     }
                             }
-                            if (result) {
+                            // if (result) {
                                 arr.push({
                                     id: item.id,
                                     name: item.securityName,
@@ -818,12 +820,12 @@ export default {
                                     showInput: false,
                                     inputValue: ''
                                 })
-                            } else {
-                                total++;
-                            }
+                            // } else {
+                            //     total++;
+                            // }
                         }
                         that.tableData = arr;
-                        that.total = res.data.total - total;
+                        that.total = res.data.total;
                     } else {
                         that.$message.error(res.message);
                     }
@@ -1151,6 +1153,7 @@ export default {
                     }
                     that.userRoles = rest.data.list; // 获取用户角色关联信息
                   }
+                  that.getNodeData();
                   that.getNodeTreeData();
                   that.getTableData();
                 })

src/views/energyOperationSupport/router/index.js

@@ -44,6 +44,8 @@ import tubeCompile from '@/views/energyOperationSupport/components/rectification
 import tubeQuery from '@/views/energyOperationSupport/components/rectificationPunishmentTube/tubeQuery.vue'
 // 安全文件管理
 import SecurityFile from '@/views/energyOperationSupport/components/securitys/SecurityFile.vue'
+// 安全文件管理
+import securitys from '@/views/energyOperationSupport/components/securitys/Securitys.vue'
 
 Vue.use(Router)
 
@@ -155,6 +157,11 @@ export default new Router({
                 path: 'SecurityFile',
                 name: 'SecurityFile',
                 component: SecurityFile
+            },
+            {
+                path: 'securitys',
+                name: 'securitys',
+                component: securitys
             }
         ]
     }]