[task-1038] 检测档案项目附件按检测项目分类

src/views/platform/bpmn/bpmInstHis/record/component/testingRecord.vue

@@ -58,13 +58,13 @@
                 <el-table-column prop="gai_zhang_jian_pd" label="检测项目" minWidth="200"></el-table-column>
                 <el-table-column label="操作" align="left" width="100">
                     <template slot-scope="scope">
-                        <el-popover placement="left" width="200" trigger="click">
+                        <el-popover placement="left" width="150" trigger="click">
                             <div slot="reference" class="more"><i class="el-icon-caret-bottom"></i>查阅</div>
                             <template v-for="(item, index) in reportList">
                                 <!-- 检测记录 -->
                                 <div v-if="item.key === 'testing'">
-                                    <el-popover placement="left" width="200" trigger="click">
-                                        <div slot="reference" class="operate-item" @click="getTesting(scope.row)"><i class="el-icon-s-order"></i> {{ item.name }}</div>
+                                    <el-popover placement="left" width="300" trigger="click" :visible="visibleKey === item.key">
+                                        <div slot="reference" class="operate-item" @click="visablePopover(scope.row, item.key, 'getTesting')"><i class="ibps-icon-folder"></i> {{ item.name }}</div>
                                         <div class="three-item">
                                             <div v-for="i in testingList" :key="i.id" class="operate-item" @click="consult(i)">
                                                 {{ i.projectName }}
@@ -73,17 +73,43 @@
                                     </el-popover>
                                 </div>
                                 <div v-else-if="item.key === 'file'">
-                                    <el-popover placement="left" width="300" trigger="click">
-                                        <div slot="reference" class="operate-item" @click="getFile(scope.row, item.field)"><i class="el-icon-s-order"></i> {{ item.name }}</div>
+                                    <el-popover placement="left" width="300" trigger="click" :visible="visibleKey === item.key">
+                                        <div slot="reference" class="operate-item" @click="visablePopover(scope.row, item.key, 'getFile')"><i class="ibps-icon-folder"></i> {{ item.name }}</div>
                                         <div class="three-item">
-                                            <div v-for="i in fileList" :key="i.id" class="operate-item">
-                                                <span @click="preview(i)"><i class="el-icon-tickets"></i>{{ i.fileName }}.{{ i.ext }}</span>
-                                                <i v-if="hasRole" class="el-icon-download" @click="download(i)"></i>
+                                            <div v-for="(project, index) in fileList" :key="index">
+                                                <div class="project-name">{{ project.projectName }}</div>
+                                                <div v-for="file in project.files" :key="file.id" class="operate-item">
+                                                    <div class="file-item">
+                                                        <i class="ibps-icon-file-text-o"></i>
+                                                        <el-tooltip effect="dark" placement="top">
+                                                            <div slot="content">{{ file.fileName }}.{{ file.ext }}</div>
+                                                            <span @click="preview(file)">{{ file.fileName }}.{{ file.ext }}</span>
+                                                        </el-tooltip>
+                                                        <i v-if="hasRole" class="el-icon-download" @click="download(file)"></i>
+                                                    </div>
+                                                </div>
                                             </div>
                                         </div>
                                     </el-popover>
                                 </div>
-                                <div v-else :key="index" class="operate-item" @click="alertReport(item.path, scope.row[item.key])"><i class="el-icon-s-order"></i> {{ item.name }}</div>
+                                <div v-else-if="item.key === 'report'">
+                                    <el-popover placement="left" width="300" trigger="click" :visible="visibleKey === item.key">
+                                        <div slot="reference" class="operate-item" @click="visablePopover(scope.row, item.key, 'getFile')"><i class="ibps-icon-folder"></i> {{ item.name }}</div>
+                                        <div class="three-item">
+                                            <div v-for="i in reportFileList" :key="i.id" class="operate-item">
+                                                <div class="file-item">
+                                                    <i class="ibps-icon-file-text-o"></i>
+                                                    <el-tooltip effect="dark" placement="top">
+                                                        <div slot="content">{{ i.fileName }}.{{ i.ext }}</div>
+                                                        <span @click="preview(i)">{{ i.fileName }}.{{ i.ext }}</span>
+                                                    </el-tooltip>
+                                                    <i v-if="hasRole" class="el-icon-download" @click="download(i)"></i>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </el-popover>
+                                </div>
+                                <div v-else :key="index" class="operate-item" @click="alertReport(item.path, scope.row[item.key])"><i class="ibps-icon-file-text"></i> {{ item.name }}</div>
                             </template>
                         </el-popover>
                     </template>
@@ -180,14 +206,12 @@ const reportList = [
         name: '附件',
         key: 'file',
         path: '',
-        field: 'suo_you_yuan_shi_,fu_jian_yi_',
         hasItem: true
     },
     {
         name: '检测报告',
-        key: 'file',
+        key: 'report',
         path: '43罗湖/LHXBJY 检测报告',
-        field: 'bao_gao_pdf_',
         hasItem: false
     }
 ]
@@ -241,6 +265,7 @@ export default {
             tableData: [],
             testingList: [],
             fileList: [],
+            reportFileList: [],
             contractList: [],
             trustList: [],
             srcUrl: '',
@@ -254,7 +279,8 @@ export default {
             prop: '',
             order: '',
             params: '',
-            hasRole
+            hasRole,
+            visibleKey: ''
         }
     },
     created () {
@@ -282,7 +308,7 @@ export default {
                 pageNo: this.currentPage,
                 order: this.order
             }
-            selectDetectionFile(params).then((res) => {
+            selectDetectionFile(params).then(res => {
                 const data = res.data
                 const { dataResult, pageResult } = data
                 // console.log(pageResult)
@@ -301,32 +327,48 @@ export default {
             }
             return `${start}至${end}`
         },
+        visablePopover (row, key, method) {
+            this.visibleKey = key
+            this[method](row, key)
+        },
         // 获取检测项目数据
         getTesting (row) {
             const { wei_tuo_id_, yang_pin_bian_hao, xiu_gai_bao_gao_b } = row
             this.testingList = []
             const sql = `select b.id_ as id, a.defkey_ as number, a.jian_ce_xiang_mu_ as projectName, max(b.create_time_) from t_mjjcnlfw a, t_lhjczb b where a.id_ = b.jian_ce_xiang_mu_ and b.wei_tuo_id_ = '${wei_tuo_id_}' and b.yang_pin_bian_hao = '${yang_pin_bian_hao}' and find_in_set(b.jian_ce_xiang_mu_, '${xiu_gai_bao_gao_b}') group by b.jian_ce_xiang_mu_`
-            curdPost('sql', sql).then((res) => {
+            curdPost('sql', sql).then(res => {
                 this.testingList = res.variables && res.variables.data
                 // console.log(this.testingList)
             })
         },
-        // 获取附件信息，报告表【bao_gao_pdf_, suo_you_yuan_shi_, fu_jian_yi_】字段
-        getFile (row, key) {
-            let files = ''
-            if (key.includes(',')) {
-                // 多字段
-                const a = row.suo_you_yuan_shi_ ? row.suo_you_yuan_shi_.split(',') : []
-                const b = row.fu_jian_yi_ ? row.fu_jian_yi_.split(',') : []
-                files = a.concat(b).join(',')
+        async getFile (row, type) {
+            const { xiu_gai_bao_gao_b, yang_pin_bian_hao, bao_gao_pdf_, qi_ta_bao_gao_ } = row
+            this.fileList = []
+            this.reportFileList = []
+            if (type === 'file') {
+                const sql = `select xiang_mu_ming_che, fu_tu_id_, wen_dang_fu_jian_, kuai_zhao_fu_jian from t_lhjczb where find_in_set(jian_ce_xiang_mu_, '${xiu_gai_bao_gao_b}') and yang_pin_bian_hao = '${yang_pin_bian_hao}'`
+                curdPost('sql', sql).then(async res => {
+                    const { data = [] } = res.variables || {}
+                    if (!data.length) {
+                        this.fileList = []
+                    }
+                    const allFileID = data.map(i => [i.fu_tu_id_, i.wen_dang_fu_jian_, i.kuai_zhao_fu_jian].filter(i => i).join(','))
+                    const fileInfo = await this.getFileInfo(allFileID)
+                    this.fileList = data.map(i => ({
+                        projectName: i.xiang_mu_ming_che,
+                        files: fileInfo.filter(k => [i.fu_tu_id_, i.wen_dang_fu_jian_, i.kuai_zhao_fu_jian].filter(i => i).join(',').includes(k.id))
+                    }))
+                })
             } else {
-                files = row[key]
+                const allReportID = [bao_gao_pdf_, qi_ta_bao_gao_].filter(i => i)
+                this.reportFileList = await this.getFileInfo(allReportID)
             }
-            this.fileList = []
-            const sql = `select id_ as id, file_name_ as fileName, ext_ as ext from ibps_file_attachment where find_in_set(id_, '${files}')`
-            curdPost('sql', sql).then((res) => {
-                this.fileList = res.variables && res.variables.data
-            })
+        },
+        async getFileInfo (fileIds) {
+            const sql = `select id_ as id, file_name_ as fileName, ext_ as ext from ibps_file_attachment where find_in_set(id_, '${fileIds.join(',')}')`
+            const res = await curdPost('sql', sql)
+            const { data = [] } = res.variables || {}
+            return data
         },
         consult (data) {
             this.alertReport(testingPath[data.number], data.id)
@@ -403,83 +445,117 @@ export default {
 }
 </script>
 
-<style lang="scss">
-.content {
-    .header {
-        margin-top: 5px;
-        width: 100%;
-        height: 25px;
-        text-align: center;
-        font-weight: 700;
-        background-color: #f9ffff;
-        font-size: 18px;
-    }
-    .search-box {
-        height: 30px;
-        margin-bottom: 20px;
-        .label {
-            margin: 0 6px 0 6px;
-            color: #000;
-            font-size: 12px;
+<style lang="scss" scoped>
+    .content {
+        .header {
+            margin-top: 5px;
+            width: 100%;
+            height: 25px;
+            text-align: center;
+            font-weight: 700;
+            background-color: #f9ffff;
+            font-size: 18px;
+        }
+        .search-box {
+            height: 30px;
+            margin-bottom: 20px;
+            .label {
+                margin: 0 6px 0 6px;
+                color: #000;
+                font-size: 12px;
+            }
+            .input {
+                width: 150px;
+                font-size: 12px;
+                height: 28px !important;
+                line-height: 28px;
+                color: #606266;
+            }
+            .btn {
+                margin-left: 10px;
+                background-color: #409eff;
+                border-color: #409eff;
+                font-size: 12px;
+                border-radius: 3px;
+                padding: 7px 15px;
+            }
         }
-        .input {
-            width: 150px;
-            font-size: 12px;
-            height: 28px !important;
-            line-height: 28px;
-            color: #606266;
+        .table-container {
+            width: 100%;
+            height: calc(100vh - 220px);
+            // ::v-deep .el-table__header .table-header {
+            //     color: #000;
+            //     font-size: 12px;
+            //     padding: 6px 6px;
+            //     background: #a7d6f8 !important;
+            // }
+            ::v-deep .el-table--striped {
+                .el-table__header-wrapper {
+                    .table-header {
+                        color: #000;
+                        font-size: 12px;
+                        padding: 0px 6px;
+                        background: #a7d6f8 !important;
+                        .sort-caret.ascending {
+                            border-bottom-color: #909399;
+                        }
+                        .sort-caret.descending {
+                            border-top-color: #909399;
+                        }
+                    }
+                }
+                .el-table__body {
+                    .el-table__row  {
+                        color: #000;
+                        .el-table__cell {
+                            padding: 4px 0;
+                        }
+                    }
+                    .el-table__row--striped {
+                        .el-table__cell {
+                            background: #d9eefd;
+                        }
+                    }
+                }
+            }
         }
-        .btn {
-            margin-left: 10px;
-            background-color: #409eff;
-            border-color: #409eff;
-            font-size: 12px;
-            border-radius: 3px;
-            padding: 7px 15px;
+        .pagination {
+            height: 35px;
+            padding: 5px 2px;
+        }
+        .more {
+            cursor: pointer;
+            color: #409eff;
         }
     }
-    .table-container {
-        width: 100%;
-        height: calc(100vh - 220px);
-    }
-    .pagination {
-        height: 35px;
-        padding: 5px 2px;
-    }
-    .el-table__header .table-header {
-        color: #000;
-        font-size: 12px;
-        padding: 6px 6px;
-        background: #a7d6f8 !important;
-    }
-    // .tableRowClassName {
-    //     backface-visibility: #d9eefd;
-    // }
-    // .el-table .warning-row {
-    //     background: #d9eefd;
-    // }
-    .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
-        background: #d9eefd;
-    }
-    .more {
-        cursor: pointer;
-        color: #409eff;
-    }
-    .el-dropdown-link {
+    .operate-item {
         cursor: pointer;
-        color: #409eff;
-    }
-    .el-icon-arrow-down {
-        font-size: 12px;
+        color: #85ce61;
+        .file-item {
+            display: flex;
+            align-items: center;
+            > i {
+                margin-right: 4px;
+            }
+            > span {
+                flex: 1;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+        ::v-deep .el-icon-download {
+            float: right;
+            font-size: 16px;
+            color: #409eff;
+        }
     }
-}
-.operate-item {
-    cursor: pointer;
-    color: #85ce61;
-    .el-icon-download {
-        float: right;
-        font-size: 16px;
-        color: #409eff;
+    .three-item {
+        max-height: 250px;
+        overflow-y: auto;
+        .project-name {
+            font-weight: bolder;
+            color: #000;
+        }
     }
-}
 </style>