lookDocumentListDialog.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. <!--
  2. 查看多个文档
  3. import lookDocumentListDialog from '@/components/lookDocumentDialog/lookDocumentListDialog.vue'
  4. components: {
  5. lookDocumentListDialog
  6. },
  7. <lookDocumentListDialog v-if="lookDocumentListType" :propsLookDocumentListData="propsLookDocumentListData"></lookDocumentListDialog>
  8. //查看多个文档
  9. lookDocumentListButton(type){
  10. if(type==1){
  11. this.$set(this,'propsLookDocumentListData',{
  12. title:"查看附件",
  13. list:this.addForm.data7
  14. });
  15. this.$set(this,'lookDocumentListType',true);
  16. }else{
  17. this.$set(this,'lookDocumentListType',false);
  18. }
  19. },
  20. -->
  21. <template>
  22. <el-dialog class="lookDocumentListDialog" :title="lookDocumentListTitle"
  23. :visible.sync="lookDocumentListType" v-if="lookDocumentListType"
  24. @close="outLook"
  25. width="1300px" height="700" append-to-body>
  26. <div class="lookDocumentListDialog-page">
  27. <div class="left-box">
  28. <div class="left-title-box">
  29. <img src="@/assets/ZDimages/safetyCheck/icon_dr_wj.png">
  30. <p>材料附件</p>
  31. <p class="button-p" @click="allDownloadButton">全部下载</p>
  32. </div>
  33. <div class="left-for-box scrollbar-box">
  34. <p class="left-for-p" v-for="(iframeItem,iframeIndex) in lookDocumentList" :key="iframeIndex"
  35. @click="lookDocumentListCheck(iframeIndex)"
  36. :class="lookDocumentListIndex == iframeIndex?'check-p':''">{{iframeItem.name}}</p>
  37. </div>
  38. </div>
  39. <div class="center-border"></div>
  40. <div class="right-box">
  41. <iframe
  42. v-if="lookDocumentSrc"
  43. class="iframe"
  44. :src="lookDocumentSrc" scrolling="auto" frameborder="0">
  45. </iframe>
  46. <p class="positionButton" @click="goPage">全屏</p>
  47. </div>
  48. </div>
  49. <div slot="footer" class="dialog-footer dialog-footer-box" style="display: flex">
  50. <p class="dialog-footer-button-null"></p>
  51. <p class="dialog-footer-button-info" @click="outLook">取消</p>
  52. <p class="dialog-footer-button-primary" @click="downloadButton">下载</p>
  53. <p class="dialog-footer-button-null"></p>
  54. </div>
  55. </el-dialog>
  56. </template>
  57. <script>
  58. export default {
  59. name: 'lookDocumentListDialog',
  60. props:{
  61. propsLookDocumentListData:{},
  62. },
  63. data(){
  64. return{
  65. lookDocumentListType:true,
  66. lookDocumentListTitle:"",
  67. lookDocumentList:[],
  68. lookDocumentSrc:"",
  69. lookDocumentListIndex:0,
  70. }
  71. },
  72. created(){
  73. this.$set(this,'lookDocumentListTitle',this.propsLookDocumentListData.title);
  74. this.$set(this,'lookDocumentList',this.propsLookDocumentListData.list);
  75. this.$set(this,'lookDocumentSrc',this.urlJudge(this.propsLookDocumentListData.list[0].url));
  76. },
  77. mounted(){
  78. },
  79. methods:{
  80. //全部下载
  81. allDownloadButton(){
  82. let self = this;
  83. for(let i=0;i<self.lookDocumentList.length;i++){
  84. this.downloadUrl(this.lookDocumentList[i].url,this.lookDocumentList[i].name)
  85. }
  86. },
  87. // 切换按钮
  88. lookDocumentListCheck(val){
  89. this.$set(this,'lookDocumentListIndex',val);
  90. this.$set(this,'lookDocumentSrc',this.urlJudge(this.lookDocumentList[val].url));
  91. },
  92. // 返回按钮
  93. outLook(){
  94. this.$parent.lookDocumentListButton(2)
  95. },
  96. // 下载按钮
  97. downloadButton(){
  98. this.downloadUrl(this.lookDocumentList[this.lookDocumentListIndex].url,this.lookDocumentList[this.lookDocumentListIndex].name)
  99. },
  100. //打开新窗口
  101. goPage(){
  102. window.open(this.lookDocumentSrc)
  103. },
  104. }
  105. }
  106. </script>
  107. <style scoped lang="scss">
  108. .lookDocumentListDialog{
  109. .lookDocumentListDialog-page{
  110. display: flex;
  111. flex:1;
  112. height:645px;
  113. overflow: hidden;
  114. padding:0 50px;
  115. .left-box{
  116. display: flex;
  117. flex-direction: column;
  118. overflow: hidden;
  119. width:265px;
  120. .left-title-box{
  121. padding-bottom:20px;
  122. display: flex;
  123. width:230px;
  124. border-bottom:1px dashed #D8D8D8;
  125. img{
  126. width:16px;
  127. height:13px;
  128. margin:13px 15px 13px 0;
  129. }
  130. p:nth-child(2){
  131. flex:1;
  132. line-height:40px;
  133. font-size:16px;
  134. color:#0183FA;
  135. }
  136. .button-p{
  137. padding:0 10px;
  138. margin-top:5px;
  139. height:30px;
  140. line-height:30px;
  141. font-size:14px;
  142. color:#0183FA;
  143. border:1px solid #0183FA;
  144. border-radius:4px;
  145. cursor: pointer;
  146. }
  147. .button-p:hover{
  148. color:#fff;
  149. border:1px solid #0183FA;
  150. background-color: #0183FA;
  151. }
  152. }
  153. .left-for-box{
  154. flex:1;
  155. .left-for-p{
  156. padding:0 10px;
  157. width:230px;
  158. line-height:40px;
  159. margin-top:10px;
  160. font-size:16px;
  161. color:#333;
  162. display:block;
  163. overflow:hidden;
  164. text-overflow:ellipsis;
  165. white-space:nowrap;
  166. cursor: pointer;
  167. }
  168. .check-p{
  169. background-color:rgba(1,131,250,0.2);
  170. color:#0183FA;
  171. }
  172. }
  173. }
  174. .center-border{
  175. border-right:1px dashed #D8D8D8;
  176. }
  177. .right-box{
  178. flex:1;
  179. display: flex;
  180. margin-left:57px;
  181. position: relative;
  182. .positionButton{
  183. position: absolute;
  184. top:15px;
  185. right: 35px;
  186. border:1px solid #0183fa;
  187. border-radius:4px;
  188. line-height:30px;
  189. width:60px;
  190. text-align: center;
  191. cursor: pointer;
  192. color:#0183fa;
  193. background-color: #fff;
  194. }
  195. .iframe{
  196. flex:1;
  197. }
  198. }
  199. .out-button{
  200. width:60px;
  201. line-height:30px;
  202. color:#999;
  203. background-color: #dedede;
  204. border-radius:4px;
  205. text-align: center;
  206. cursor: pointer;
  207. position: absolute;
  208. top:17px;
  209. right:17px;
  210. z-index:99999;
  211. }
  212. }
  213. }
  214. </style>