修改 文档库-详情页-修改文档库详情页的展示

jero-web/src/views/documentManage/library/docDetail/index.vue

@@ -12,7 +12,7 @@
                 v-html="serial_number"></span>
             </template>
             <span v-html="serial_number"></span>
-            <span> {{$t('StandardDetails')}}</span>
+            <!--            <span> {{$t('StandardDetails')}}</span>-->
           </a-tooltip>
 
         </div>
@@ -47,13 +47,14 @@
         <div class="detail-content">
           <div v-for="(item,index) in detailList" class="content-box">
             <div v-for="val in Object.keys(item)" class="content">
-              <div class="header-text">
+              <div class="header-text fixedPosition">
                 {{val}}
               </div>
               <div class="content-text" v-if="val == $t('essentialInformation')">
                 <div class="text-field" :class="{'text-content-button-one':ol.field_show_type == 8 ? true :false}"
                      v-for="(ol,index1) in item[val]">
-                  <span class="text-field-left" :title="ol.db_field_txt">{{ol.db_field_txt}}</span>
+                  <span v-if="ol.field_show_type == 10" class="text-field-left-Index" :title="ol.db_field_txt">{{ol.db_field_txt}}</span>
+                  <span v-else class="text-field-left" :title="ol.db_field_txt">{{ol.db_field_txt}}</span>
                   <span class="text-field-right text-field-right-color" v-if="ol.urlClick" @click="urlClick(ol)"
                         :title="ol.value">{{ol.value ? ol.value : '--'}}</span>
                   <span class="text-field-right" v-else-if="ol.field_show_type == 7">
@@ -64,85 +65,52 @@
                     </a-button>
                     <span v-else>--</span>
                   </span>
-                  <span @click="relatedClick(ol)" class="text-field-right text-field-right-color"
+                  <span class="text-field-right-Index"
-                        v-else-if="ol.field_show_type == 10" :title="ol.value">
+                        v-else-if="ol.field_show_type == 10">
-                    {{ol.value ? ol.value : '--'}}
+                    <span class="text-field-right-color-text"
+                          :title="valItem.title"
+                          @click="relatedClick(valItem)"
+                          v-if="ol.list && ol.list.length > 0"
+                          v-for="valItem in ol.list">
+                         {{valItem.title}}
+                    </span>
+                    <span v-else>--</span>
                   </span>
                   <span class="text-field-right" v-else :title="ol.value">{{ol.value ? ol.value : '--'}}</span>
                 </div>
               </div>
+
               <div class="TextInformation" v-else-if="val == $t('textInformation')">
-                <table class="tableInformation">
+                <div class="TextInformation-box" v-for="(ol,index1) in item[val]">
-                  <tr v-for="(ol,index1) in item[val]" class="trInformation">
+                  <div class="TextInformation-box-title fixedPosition">
-                    <td class="tdInformation LeftTdInformation" :rowspan="ol.count"
+                    {{ol.db_field_txt}}
-                        v-if=" index1 == 0 || (index1 > 0 && ol.db_field_txt != item[val][index1 - 1].db_field_txt)">
+                  </div>
-                      {{ol.db_field_txt}}
+                  <div class="TextInformation-box-box">
-                    </td>
+                    <div class="TextInformation-box-box-text"
-                    <td class="tdInformation conteTdInformation" v-if="ol.field_show_type==='7'">
+                         v-if="ol.value && ol.value.length > 0"
-                          <span class="leftconteTdInformation" style="cursor: pointer"
+                         v-for="valItem in ol.value">
-                                :title="ol.value ? ol.value.fileName:''"
+                      <span @click="pdfPreview(valItem)"
-                                @click="pdfPreview(ol.value)">
+                            :title="valItem.fileName"
-                      {{ol.value ? ol.value.fileName : '--'}}
+                            class="leftconteTdInformation">{{valItem.fileName}}</span>
-                      </span>
+                      <a-icon class="leftconteTdInformation-icon"
-                      <span class="Standard-breakdown" v-if="ol.splitFlag == 1" @click="breakdown(ol)">{{$t('StandardBreakdown')}}</span>
+                              @click="download(valItem)"
-                      <span class="rightTdInformation" v-if="ol.field_show_type==='7'" v-show="ol.value"
+                              :title="$t('download')"
-                            @click="download(ol.value)">
+                              type="vertical-align-bottom"/>
-                           <a-icon type="vertical-align-bottom"/>
+                      <a-icon class="leftconteTdInformation-icon"
-                            {{$t('download')}}
+                              @click="breakdown(valItem)"
-                       </span>
+                              v-if="valItem.splitFlag == 1"
-                    </td>
+                              :title="$t('StandardBreakdown')"
-                    <td class="tdInformation TextInformationContentcontentButton" v-else-if="ol.field_show_type==='10'">
+                              type="profile" />
-                        <span style="cursor: pointer" @click="relatedClick(ol)" v-if="ol.value"
+                    </div>
-                              :title="ol.value">{{ol.value}}</span>
+                  </div>
-                      <span style="cursor: pointer" v-else>--</span>
+                </div>
-                    </td>
-                    <td class="tdInformation TextInformationContentcontent" v-else>
-                       <span v-if="ol.urlClick" @click="urlClick(ol)"
-                             class="text-field-right-color"
-                             :title="ol.value">{{ol.value ? ol.value : '--'}}</span>
-                      <span :title="ol.value" v-else>{{ol.value ? ol.value:'--'}}</span>
-                    </td>
-                  </tr>
-                </table>
-              </div>
-              <div class="TextInformation" v-else-if="val == $t('relatedInformation')">
-                <table class="tableInformation">
-                  <tr v-for="(ol,index1) in item[val]" class="trInformation">
-                    <td class="tdInformation LeftTdInformation" :rowspan="ol.count"
-                        v-if=" index1 == 0 || (index1 > 0 && ol.db_field_txt != item[val][index1 - 1].db_field_txt)">
-                      {{ol.db_field_txt}}
-                    </td>
-                    <td class="tdInformation conteTdInformation" v-if="ol.field_show_type==='7'">
-                        <span class="leftconteTdInformation" style="cursor: pointer"
-                              :title="ol.value ? ol.value.fileName:''"
-                              @click="pdfPreview(ol.value)">
-                      {{ol.value ? ol.value.fileName : '--'}}
-                      </span>
-                      <span class="Standard-breakdown" v-if="ol.splitFlag == 1" @click="breakdown(ol)">{{$t('StandardBreakdown')}}</span>
-                      <span class="rightTdInformation" v-if="ol.field_show_type==='7'" v-show="ol.value"
-                            @click="download(ol.value)">
-                           <a-icon type="vertical-align-bottom"/>
-                            {{$t('download')}}
-                       </span>
-                    </td>
-                    <td class="tdInformation TextInformationContentcontentButton" v-else-if="ol.field_show_type==='10'">
-                        <span style="cursor: pointer" @click="relatedClick(ol)" v-if="ol.value"
-                              :title="ol.value">{{ol.value}}</span>
-                      <span style="cursor: pointer" v-else>--</span>
-                    </td>
-                    <td class="tdInformation TextInformationContentcontent" v-else>
-                       <span v-if="ol.urlClick" @click="urlClick(ol)"
-                             class="text-field-right-color"
-                             :title="ol.value">{{ol.value ? ol.value : '--'}}</span>
-                      <span :title="ol.value" v-else>{{ol.value ? ol.value:'--'}}</span>
-                    </td>
-                  </tr>
-                </table>
               </div>
+
               <div class="content-text" v-else>
                 <div class="text-field" :class="{'text-content-button-one':ol.field_show_type == 8 ? true :false}"
                      v-for="(ol,index1) in item[val]">
-                  <span class="text-field-left" :title="ol.db_field_txt">{{ol.db_field_txt}}</span>
+                  <span v-if="ol.field_show_type == 10" class="text-field-left-Index" :title="ol.db_field_txt">{{ol.db_field_txt}}</span>
+                  <span class="text-field-left" v-else :title="ol.db_field_txt">{{ol.db_field_txt}}</span>
                   <span class="text-field-right text-field-right-color" v-if="ol.urlClick" @click="urlClick(ol)"
                         :title="ol.value">{{ol.value ? ol.value : '--'}}</span>
                   <span class="text-field-right" v-else-if="ol.field_show_type == 7">
@@ -153,9 +121,16 @@
                     </a-button>
                     <span v-else>--</span>
                   </span>
-                  <span @click="relatedClick(ol)" class="text-field-right text-field-right-color"
+                  <span class="text-field-right-Index"
-                        v-else-if="ol.field_show_type == 10" :title="ol.value">
+                        v-else-if="ol.field_show_type == 10">
-                    {{ol.value ? ol.value : '--'}}
+                    <span class="text-field-right-color-text"
+                          @click="relatedClick(valItem)"
+                          :title="valItem.title"
+                          v-if="ol.list && ol.list.length > 0"
+                          v-for="valItem in ol.list">
+                         {{valItem.title}}
+                    </span>
+                    <span v-else>--</span>
                   </span>
                   <span class="text-field-right" v-else :title="ol.value">{{ol.value ? ol.value : '--'}}</span>
                 </div>
@@ -164,7 +139,7 @@
           </div>
           <div class='content-box'>
             <div class="content">
-              <div class="header-text">
+              <div class="header-text fixedPosition">
                 {{$t('DetailsPhasedImplementation')}}
               </div>
               <a-table
@@ -189,6 +164,14 @@
             </div>
           </div>
         </div>
+        <div class="detail-content-right">
+          <div class="detail-content-right-text"
+               :class="{'detail-content-right-text-one':item.pname ? true : false}"
+               v-for="(item,index) in rightTitleList"
+               @click="detailTextClick(index,item.name)">
+            {{item.name}}
+          </div>
+        </div>
       </div>
     </div>
     <a-modal
@@ -306,14 +289,15 @@
     components: {
       uploadFile
     },
-    mixins: [ResizeColumnProvide,ResizeHeader],
+    mixins: [ResizeColumnProvide, ResizeHeader],
     data() {
       return {
         url: {
           getInfo: 'document/bussDocumentLibraryEO/getInfoById',
           list: 'log/bussLogEO/page',
           getTitle: '/document/bussDocumentLibraryEO/getTitle',
-          getPage: '/document/phasedImplementationDetailsEO/page'
+          getPage: '/document/phasedImplementationDetailsEO/page',
+          getMenuList: 'document/bussDocumentLibraryEO/getMenuList'
         },
         titleHeader: '',
         visibleFile: false,
@@ -345,7 +329,7 @@
         ],
         dataSourceRelated: [],
         detailList: [],
-        dataGrad:[],
+        dataGrad: [],
         visible: false,
         serial_number: '',
         confirmLoading: false,
@@ -360,35 +344,36 @@
         tabletotal: 0,
         visibleRelated: false,
         dataSourceFile: [],
+        rightTitleList: [],
         columnsGrading: [
           {
             title: this.$t('Statutenumberclause'),
             dataIndex: 'standNumberOrClause',
             align: 'left',
             ellipsis: true,
-            width: 300
+            width: '25%'
           },
           {
             title: this.$t('Typeofimplementation'),
             dataIndex: 'implementationTypeText',
             align: 'left',
             ellipsis: true,
-            width: 150
+            width: '25%'
           },
           {
             title: this.$t('implementationDateTwo'),
             dataIndex: 'implementationDate',
             align: 'left',
             ellipsis: true,
-            width: 150
+            width: '25%'
           },
           {
             title: this.$t('remarks'),
             dataIndex: 'remarks',
             align: 'left',
             ellipsis: true,
-            width: 350
+            width: '25%'
-          },
+          }
         ],
         columns: [
           {
@@ -420,10 +405,12 @@
       let _this = this
       this.loading = true
       document.title = this.$t('documentLibraryDetails')
+
       this.getTitle(function() {
         _this.getInfoById()
       })
       this.getPage()
+      this.getRightTitle()
     },
     methods: {
       ...mapGetters(['userInfo']),
@@ -495,13 +482,17 @@
         getAction(this.url.getInfo, { id: _id }).then((res) => {
           if (res.success) {
             this.detailList = res.result
+            this.$nextTick(() => {
+              let detailContentRightText = document.getElementsByClassName('detail-content-right-text')
+              detailContentRightText[0].classList.add('detail-content-right-text-color')
+            })
             this.loading = false
           } else {
             this.detailList = []
           }
         })
       },
-      getPage(){
+      getPage() {
         let tablequery = {
           pageNo: this.tablepageNo,
           pageSize: this.tablepageSize,
@@ -510,7 +501,7 @@
         getAction(this.url.getPage, tablequery).then((res) => {
           if (res.success) {
             this.dataGrad = res.result.records
-            this.tabletotal=res.result.total
+            this.tabletotal = res.result.total
             this.loading = false
           } else {
             this.dataGrad = []
@@ -635,16 +626,11 @@
         window.open(newUrl.href, '_blank')
       },
       relatedClick(val) {
-        if (val.list && val.list.length == 1) {
+        let newUrl = this.$router.resolve({
-          let newUrl = this.$router.resolve({
+          path: '/docManage/library/detail',
-            path: '/docManage/library/detail',
+          query: val
-            query: val.list[0]
+        })
-          })
+        window.open(newUrl.href, '_blank')
-          window.open(newUrl.href, '_blank')
-        } else {
-          this.visibleRelated = true
-          this.dataSourceRelated = val.list
-        }
       },
       breakdown(item) {
         let newUrl = this.$router.resolve({
@@ -654,6 +640,41 @@
           }
         })
         window.open(newUrl.href, '_blank')
+      },
+      detailTextClick(num, name) {
+        let detailContentRightTextColor = document.getElementsByClassName('detail-content-right-text-color')
+        if (detailContentRightTextColor && detailContentRightTextColor.length > 0) {
+          detailContentRightTextColor[0].classList.remove('detail-content-right-text-color')
+        }
+        let detailContentRightText = document.getElementsByClassName('detail-content-right-text')
+        detailContentRightText[num].classList.add('detail-content-right-text-color')
+
+        let fixedPosition = document.getElementsByClassName('fixedPosition')
+        if (fixedPosition && fixedPosition.length > 0) {
+          for (let i = 0; i < fixedPosition.length; i++) {
+            if (fixedPosition[i].innerText == name) {
+              let offsetTop = fixedPosition[i].offsetTop
+              let body = document.documentElement || document.body
+              body.scrollTop = offsetTop - 68
+            }
+          }
+        }
+      },
+      getRightTitle() {
+        let _id = this.$route.query.documentId === undefined ? this.$route.query.id : this.$route.query.documentId
+        let query = {
+          id: _id
+        }
+        getAction(this.url.getMenuList, query).then((res) => {
+          if (res.success) {
+            this.rightTitleList = res.result
+            this.rightTitleList.push({
+              name:this.$t('DetailsPhasedImplementation'),
+            })
+          } else {
+            this.rightTitleList = []
+          }
+        })
       }
     }
   }
@@ -671,17 +692,27 @@
     color: #333;
     background-color: #fff !important;
   }
+
   .tooltipColor .ant-tooltip-arrow::before {
     background-color: #fff;
   }
 </style>
 <style lang="less" scoped>
-  @import'~@assets/less/common.less';
+  @import '~@assets/less/common.less';
+
+  body {
+    height: auto;
+    transition: all .5s linear !important;
+  }
 
   .doc-detail {
     background: #fff;
     height: 100%;
 
+    .detail-content {
+      width: calc(100% - 212px);
+    }
+
     .doc-detail-wrap {
       .doc-detail-header {
         width: 100%;
@@ -709,6 +740,7 @@
           /*width: 800px;*/
           line-height: 68px;
           display: flex;
+          align-items: center;
 
           .doc-detail-btn {
             margin-left: 10px;
@@ -717,16 +749,16 @@
       }
 
       .content-box {
-        padding: 0 32px;
+        padding: 0 40px 0 32px;
         box-sizing: border-box;
       }
 
       .header-text {
         font-size: 16px;
-        font-weight: 400;
+        font-weight: bold;
-        height: 80px;
+        height: 90px;
         color: #000F16;
-        line-height: 80px;
+        line-height: 110px;
       }
 
       .content-text {
@@ -739,7 +771,7 @@
           margin-bottom: 8px;
 
           .text-field-left {
-            width: 124px;
+            width: 114px;
             display: inline-block;
             font-size: 14px;
             font-weight: 400;
@@ -747,19 +779,19 @@
             text-overflow: ellipsis;
             white-space: nowrap;
             overflow: hidden;
-            margin-right: 24px;
+            margin-right: 6px;
           }
 
           .text-field-right {
-            width: calc(100% - 200px);
+            width: calc(100% - 130px);
             display: inline-block;
-            font-size: 16px;
+            font-size: 14px;
             text-overflow: ellipsis;
             white-space: nowrap;
             overflow: hidden;
             word-break: break-word;
             color: #040B29;
-            font-weight: 400;
+            font-weight: bold;
           }
         }
 
@@ -767,7 +799,7 @@
           width: 100%;
 
           .text-field-left {
-            width: 124px;
+            width: 114px;
             display: inline-block;
             font-size: 14px;
             font-weight: 400;
@@ -775,22 +807,22 @@
             text-overflow: ellipsis;
             white-space: nowrap;
             overflow: hidden;
-            margin-right: 24px;
+            margin-right: 6px;
             float: left;
             margin-top: 3px;
           }
 
           .text-field-right {
-            width: calc(100% - 200px);
+            width: calc(100% - 130px);
             display: inline-block;
-            font-size: 16px;
+            font-size: 14px;
             text-overflow: ellipsis;
             white-space: pre-wrap;
             word-break: break-word;
             overflow: visible;
             float: left;
             color: #040B29;
-            font-weight: 400;
+            font-weight: bold;
           }
         }
       }
@@ -804,16 +836,21 @@
 
   .operator-text-text {
     cursor: pointer;
-    margin-right: 53px;
+    margin-right: 16px;
     font-size: 14px;
     font-weight: 400;
     color: #040B29;
     display: inline-block;
-    width: 100px;
+    width: 130px;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
-    text-align: right;
+    text-align: center;
+    height: 40px;
+    border: 1px solid #CED0D8;
+    border-radius: 4px;
+    line-height: 40px;
+    padding: 0 5px;
   }
 
   .content-box:last-child {
@@ -854,11 +891,20 @@
   }
 
   .leftconteTdInformation {
-    width: calc(100% - 388px);
+    max-width: calc(100% - 30px);
     display: inline-block;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
+    margin-right: 4px;
+    color: #01A0AC;
+    cursor: pointer;
+  }
+
+  .leftconteTdInformation-icon {
+    color: #01A0AC;
+    cursor: pointer;
+    margin-right: 6px;
   }
 
   .rightTdInformation {
@@ -910,21 +956,111 @@
     cursor: pointer;
   }
 
-  ///deep/.table .ant-table-thead > tr > th {
+  /deep/ .ant-table-placeholder {
-  //  font-weight: bolder;
-  //}
-  ///deep/.ant-table-thead > tr > th {
-  //  background: #f3f6f6;
-  //}
-  ///deep/.table .ant-table-tbody > tr > td {
-  //  color: #040B29 ;
-  //}
-
-  /deep/ .ant-table-placeholder{
     margin-top: 0px !important;
   }
 
   .text {
     margin-right: 10px
   }
+
+  .TextInformation-box {
+    width: 100%;
+    height: auto;
+    overflow: hidden;
+  }
+
+  .TextInformation-box-title {
+    background: #F5F6F7;
+    border-radius: 4px;
+    width: 100%;
+    height: 56px;
+    padding: 0 16px;
+    line-height: 56px;
+    color: #040B29;
+    font-weight: 400;
+    font-size: 16px;
+  }
+
+  .TextInformation-box-box {
+    width: 100%;
+    height: auto;
+    padding: 10px 16px 10px 16px;
+    overflow: hidden;
+  }
+
+  .TextInformation-box-box-text {
+    width: calc(25% - 20px);
+    margin-right: 20px;
+    height: 36px;
+    float: left;
+    display: flex;
+    align-items: center;
+  }
+
+  .detail-content-right {
+    width: 212px;
+    position: fixed;
+    top: 120px;
+    right: 0;
+    padding: 0 32px 0 0;
+  }
+
+  .detail-content-right-text {
+    color: #040B29;
+    font-size: 14px;
+    font-weight: bolder;
+    height: 36px;
+    line-height: 36px;
+    border-left: 2px #CED0D8 solid;
+    padding: 0 0 0 8px;
+    box-sizing: border-box;
+    cursor: pointer;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .detail-content-right-text-one {
+    padding: 0 0 0 20px;
+  }
+
+  .detail-content-right-text-color {
+    color: #01A0AC;
+    border-left: 2px #01A0AC solid;
+  }
+
+  .text-field-left-Index {
+    width: 114px;
+    display: inline-block;
+    font-size: 14px;
+    font-weight: 400;
+    color: #6F7385;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    margin-right: 6px;
+    float: left;
+  }
+
+  .text-field-right-Index {
+    width: calc(100% - 130px);
+    display: inline-block;
+    font-size: 14px;
+    word-break: break-word;
+    float: left;
+  }
+
+  .text-field-right-color-text {
+    width: calc(50% - 20px);
+    margin-right: 20px;
+    font-size: 14px;
+    display: inline-block;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    cursor: pointer;
+    font-weight: bold;
+    color: #01A0AC;
+  }
 </style>