稽查文档管理新增文件夹

src/views/trials/trials-workbench/components/auditDocument/contextmenu.vue

@@ -29,7 +29,7 @@
                 <i class="icon  icon_rename" />
                 <span>{{ $t('trials:trials-workbench:auditDocument:menu:rename') }}</span>
             </div>
-            <div class="contextmenu__item" @click="getDataPath('del')">
+            <div class="contextmenu__item" @click="handleMenu('del')">
                 <i class="icon  icon_del" />
                 <span>{{ $t('trials:trials-workbench:auditDocument:menu:del') }}</span>
             </div>

src/views/trials/trials-workbench/components/auditDocument/detail.vue

@@ -5,6 +5,8 @@
             <div class="header">
                 <div class="file_icon">
                     <i class="name_folder" v-if="!rowData.AuditDocumentTypeEnum"></i>
+                    <img v-else-if="['png', 'jpg', 'jpeg'].includes(rowData.FileFormat.toLowerCase())"
+                    :src="OSSclientConfig.basePath + rowData.FilePath" alt="" class="name_image">
                     <i :class="`name_${rowData.FileFormat}`" v-else></i>
                 </div>
                 <div class="file_name">
@@ -200,6 +202,8 @@ export default {
         .file_icon {
             width: 50px;
             height: 50px;
+            display: flex;
+        align-items: center;
 
             i {
                 display: inline-block;
@@ -214,7 +218,11 @@ export default {
                 font-style: normal;
                 pointer-events: none;
             }
+.name_image{
+    max-width:90%;
+    max-height:100%;
 
+}
             .name_pdf {
                 background-image: url(@/assets/file_icon/pdf.png);
             }

src/views/trials/trials-workbench/components/auditDocument/index.vue

@@ -27,7 +27,7 @@
                 </el-button>
             </el-form-item>
             <el-form-item>
-                <el-button type="primary">
+                <el-button type="primary" @click.stop="addFolder">
                     {{ $t('trials:trials-workbench:auditDocument:button:addFolder') }}
                 </el-button>
                 <el-button type="primary" @click.stop="openFile(false)">
@@ -54,8 +54,8 @@
                 </el-breadcrumb-item>
             </el-breadcrumb>
         </div>
-        <el-table id="auditDocumentTable" :data="tableData" style="width: 99%" row-key="Id" :loading="loading"
-            :row-style="setRowStyle" v-adaptive="{ bottomOffset: 75 }" height="100" :border="true"
+        <el-table id="auditDocumentTable" ref="auditDocumentTable" :data="tableData" style="width: 99%" row-key="Id"
+            :loading="loading" :row-style="setRowStyle" v-adaptive="{ bottomOffset: 75 }" height="100" :border="true"
             :expand-row-keys="expandedRows" :tree-props="{ children: 'Children', hasChildren: 'hasChildren' }"
             @expand-change="handleExpandChange" @row-click="handleRowClick" @cell-mouse-enter="handleCellMouseEnter"
             @cell-mouse-leave="handleCellMouseLeave" @row-contextmenu="handleRowContextmenu"
@@ -105,6 +105,7 @@
         <detail ref="versionDetail" v-if="visible" :visible.sync="visible" :rowData="rowData"
             @openContextmenu="openContextmenu" @openFileNewVersion="openFileNewVersion" @delData="delData" />
         <viewer ref="picture_perview" style="margin: 0 10px"
+            v-if="rowData.FileFormat && ['png', 'jpg', 'jpeg'].includes(rowData.FileFormat.toLowerCase())"
             :images="[`${OSSclientConfig.basePath}${rowData.FilePath}`]">
 
             <img v-show="false" crossorigin="anonymous" :src="`${OSSclientConfig.basePath}${rowData.FilePath}`"
@@ -180,6 +181,71 @@ export default {
         }
     },
     methods: {
+        // 新建文件夹
+        addFolder() {
+            let parentData = {}, data = {
+                ParentId: null,
+                repeat: 0,
+                Type: "addFolder",
+                Name: this.$t("trials:trials-workbench:auditDocument:opt:addFloder"),
+                IsAuthorization: false,
+                AuditDocumentTypeEnum: 0,
+                Id: `addFolder_${Date.now()}`,
+                Children: []
+            }
+            if (!this.rowData || !this.rowData.Id) {
+                data.ParentId = this.Id
+                this.tableData.forEach(item => {
+                    if (item.Name === data.Name) {
+                        data.repeat++;
+                        data.Name = `${this.$t("trials:trials-workbench:auditDocument:opt:addFloder")}(${data.repeat})`
+                    }
+                })
+                this.tableData.unshift(data)
+                this.addRenameId(data)
+            } else {
+                if (!this.rowData.AuditDocumentTypeEnum) {
+                    parentData = this.getData(this.tableData, this.rowData.Id)
+                    data.ParentId = parentData.Id
+                    parentData.Children.forEach(item => {
+                        if (item.Name === data.Name) {
+                            data.repeat++;
+                            data.Name = `${this.$t("trials:trials-workbench:auditDocument:opt:addFloder")}(${data.repeat})`
+                        }
+                    })
+                    if (!this.expandedRows.includes(parentData.Id)) {
+                        this.expandedRows.push(parentData.Id)
+                        this.$refs.auditDocumentTable.toggleRowExpansion(parentData, true)
+                    }
+                    parentData.Children.unshift(data)
+                    this.addRenameId(data)
+                } else {
+                    let fileData = this.getData(this.tableData, this.rowData.Id)
+                    if (fileData.ParentId === this.Id) {
+                        data.ParentId = this.Id
+                        this.tableData.forEach(item => {
+                            if (item.Name === data.Name) {
+                                data.repeat++;
+                                data.Name = `${this.$t("trials:trials-workbench:auditDocument:opt:addFloder")}(${data.repeat})`
+                            }
+                        })
+                        this.tableData.unshift(data)
+                        this.addRenameId(data)
+                    } else {
+                        parentData = this.getData(this.tableData, this.fileData.ParentId)
+                        data.ParentId = parentData.Id
+                        parentData.Children.forEach(item => {
+                            if (item.Name === data.Name) {
+                                data.repeat++;
+                                data.Name = `${this.$t("trials:trials-workbench:auditDocument:opt:addFloder")}(${data.repeat})`
+                            }
+                        })
+                        parentData.Children.unshift(data)
+                        this.addRenameId(data)
+                    }
+                }
+            }
+        },
         // 获取当前目录层级
         async getBreadcrumbData() {
             if (!this.Id) return this.catalogueData = []
@@ -398,9 +464,23 @@ export default {
                 }
             })
         },
-        rename(row) {
-            this.renameId = null
-            this.updateData(row)
+        async rename(row) {
+            try {
+                this.renameId = null
+                if (row.Type === 'addFolder') {
+                    delete row.Id
+                    let data = [row]
+                    let res = await addAuditDocument(JSON.stringify(data))
+                    if (res.IsSuccess) {
+                        this.getList()
+                    }
+                } else {
+                    this.updateData(row)
+                }
+            } catch (err) {
+                console.log(rtt)
+            }
+
         },
         handleExpandChange(row, expanded) {
             if (expanded && !this.expandedRows.find(Id => Id === row.Id)) {
@@ -421,6 +501,7 @@ export default {
             this.renameId = null
             this.copyList = []
             this.shearList = []
+            this.rowData = {}
         },
         // 跳转至目录
         toCatalogue(row) {
@@ -784,7 +865,8 @@ export default {
             console.log(key, row)
             this.type = key;
             if (key === 'rename') {
-                this.renameId = this.checkList[0]
+                // this.renameId = this.checkList[0]
+                this.addRenameId(row)
             }
             if (key === 'version') {
                 this.visible = true
@@ -1024,12 +1106,12 @@ export default {
 }
 
 .icon_image {
-    height: 20px;
-    width: 20px;
+    max-height: 20px;
+    max-width: 20px;
     padding: 0px;
     line-height: 20px;
     margin-right: 6px;
-    margin-top: 6px;
+    // margin-top: 6px;
 }
 
 .icon {

vue.config.js

@@ -24,10 +24,10 @@ module.exports = defineConfig({
   productionSourceMap: false,
   devServer: {
     port: '8080',
-    headers: {
-      'Cross-Origin-Opener-Policy': 'same-origin',
-      'Cross-Origin-Embedder-Policy': 'require-corp'
-    },
+    // headers: {
+    //   'Cross-Origin-Opener-Policy': 'same-origin',
+    //   'Cross-Origin-Embedder-Policy': 'require-corp'
+    // },
     // open: true,
     client: {
       overlay: {