zhsxOther.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. <!-- 综合事项记录 -->
  2. <template>
  3. <div class='zhsx-box'>
  4. <div class='zhsx-top'>
  5. <div>
  6. <el-tabs v-model='activeName' @tab-click='handleClick'>
  7. <el-tab-pane v-for='(item,index) in everySystem' :key='index' :label='`${item.label}`' :name='`${item.type}`'>
  8. <!-- 综合记录事项 -->
  9. <div v-if='item.type==1'>
  10. <zhsx-other-table1 ref='tableZhsx1'></zhsx-other-table1>
  11. </div>
  12. <!-- 第三方检测事项 -->
  13. <div v-if='item.type==2'>
  14. <zhsx-other-table2 ref='tableZhsx2'></zhsx-other-table2>
  15. </div>
  16. </el-tab-pane>
  17. </el-tabs>
  18. </div>
  19. <div class='zhsx-img' @click='zhsxLog'>
  20. <img src='../../assets/imgs/zy1.png' alt />
  21. </div>
  22. </div>
  23. <zhsx-dialog ref='Dialog' :tableData='tableData'></zhsx-dialog>
  24. </div>
  25. </template>
  26. <script>
  27. import moment from 'moment'
  28. import Select from '@/components/Select/Select.vue'
  29. import ZhsxDialog from './zhsxDialog'
  30. import zhsxOtherTable1 from './zhsxOtherTable1'
  31. import zhsxOtherTable2 from './zhsxOtherTable2'
  32. import { queryZhsxjl } from '@/api/other.js'
  33. export default {
  34. data() {
  35. return {
  36. activeName: '1',
  37. tableData: []
  38. }
  39. },
  40. props: ['everySystem'],
  41. components: { ZhsxDialog, Select, zhsxOtherTable1, zhsxOtherTable2 },
  42. methods: {
  43. zhsxLog() {
  44. let params = {
  45. getParams: {}
  46. }
  47. queryZhsxjl(params).then(res => {
  48. console.log('综合事项弹框', res)
  49. this.tableData = res.data
  50. })
  51. this.$refs.Dialog.open()
  52. },
  53. handleClick(tab) {
  54. if (tab.index == '0') {
  55. this.$refs.tableZhsx1[0].getZhjl()
  56. } else if (tab.index == '1') {
  57. this.$refs.tableZhsx2[0].dsfjc()
  58. }
  59. }
  60. },
  61. mounted() {
  62. this.$refs.tableZhsx1[0].getZhjl()
  63. }
  64. }
  65. </script>
  66. <style lang="less" scoped>
  67. .zhsx-box {
  68. height: 100%;
  69. padding: 66px 50px 38px 50px;
  70. .zhsx-top {
  71. position: relative;
  72. .zhsx-img {
  73. position: absolute;
  74. width: 16px;
  75. height: 16px;
  76. left: 274px;
  77. top: 3px;
  78. img {
  79. width: 100%;
  80. height: 100%;
  81. }
  82. }
  83. .tab-top {
  84. display: flex;
  85. align-items: center;
  86. }
  87. }
  88. .zhsx-bottom {
  89. margin-top: 12px;
  90. background: #ffffff;
  91. position: relative;
  92. padding-bottom: 73px;
  93. .footer {
  94. height: 32px;
  95. display: flex;
  96. justify-content: flex-end;
  97. margin-top: 28px;
  98. }
  99. }
  100. }
  101. </style>
  102. <style lang="less">
  103. .zhsx-box {
  104. .el-dialog__header {
  105. padding: 16px 24px;
  106. }
  107. .el-dialog__title {
  108. font-size: 16px;
  109. font-family: PingFangSC-Medium, PingFang SC;
  110. font-weight: 500;
  111. color: rgba(0, 0, 0, 0.85);
  112. line-height: 24px;
  113. }
  114. .el-dialog__body {
  115. padding: 0 24px;
  116. height: 90%;
  117. }
  118. .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
  119. .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
  120. .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
  121. .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  122. padding-left: 16px;
  123. }
  124. .el-tabs--bottom .el-tabs__item.is-bottom:last-child,
  125. .el-tabs--bottom .el-tabs__item.is-top:last-child,
  126. .el-tabs--top .el-tabs__item.is-bottom:last-child,
  127. .el-tabs--top .el-tabs__item.is-top:last-child {
  128. padding-right: 16px;
  129. }
  130. .el-tabs__nav-wrap::after {
  131. height: 0;
  132. }
  133. .el-tabs__item {
  134. padding: 5px 16px;
  135. height: 30px;
  136. line-height: 22px;
  137. font-size: 14px;
  138. font-family: MicrosoftYaHei;
  139. color: rgba(31, 36, 41, 1);
  140. border: 1px solid rgba(195, 199, 203, 1);
  141. border-radius: 4px;
  142. }
  143. .el-tabs,
  144. .el-tabs__content {
  145. height: 94%;
  146. }
  147. .el-tabs__active-bar {
  148. background-color: transparent !important;
  149. }
  150. .is-active {
  151. color: #025baa;
  152. border-color: #025baa;
  153. border-radius: 4px;
  154. }
  155. .el-tabs__header {
  156. margin: 0 0 12px;
  157. }
  158. .el-table td,
  159. .el-table th {
  160. padding: 8px 0;
  161. }
  162. .el-input--suffix .el-input__inner {
  163. padding-right: 20px;
  164. }
  165. }
  166. </style>