zhsxOther.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  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 'meri-design'
  29. // import Select from '@/components/Select/Select.vue'
  30. import ZhsxDialog from './zhsxDialog'
  31. import zhsxOtherTable1 from './zhsxOtherTable1'
  32. import zhsxOtherTable2 from './zhsxOtherTable2'
  33. import { queryZhsxjl } from '@/api/other.js'
  34. export default {
  35. data() {
  36. return {
  37. activeName: '1',
  38. tableData: []
  39. }
  40. },
  41. props: ['everySystem'],
  42. components: { ZhsxDialog, Select, zhsxOtherTable1, zhsxOtherTable2 },
  43. methods: {
  44. zhsxLog() {
  45. let params = {
  46. getParams: {}
  47. }
  48. queryZhsxjl(params).then(res => {
  49. let arr = []
  50. //console.log('综合事项弹框', res)
  51. this.tableData = res.data || []
  52. // 将tableData中的第三项都设置为相同的数据
  53. this.tableData.map(item => {
  54. arr.push(item.jlsx)
  55. })
  56. arr = [...new Set(arr)]
  57. this.tableData.map(item => {
  58. item.jlsx = arr.join('\n\r')
  59. })
  60. })
  61. this.$refs.Dialog.open()
  62. },
  63. handleClick(tab) {
  64. if (tab.index == '0') {
  65. this.$refs.tableZhsx1[0].getZhjl()
  66. } else if (tab.index == '1') {
  67. this.$refs.tableZhsx2[0].dsfjc()
  68. }
  69. }
  70. },
  71. mounted() {
  72. this.$refs.tableZhsx1[0].getZhjl()
  73. }
  74. }
  75. </script>
  76. <style lang="less" scoped>
  77. .zhsx-box {
  78. height: 100%;
  79. padding: 66px 50px 38px 50px;
  80. .zhsx-top {
  81. position: relative;
  82. .zhsx-img {
  83. position: absolute;
  84. width: 16px;
  85. height: 16px;
  86. left: 260px;
  87. top: 3px;
  88. img {
  89. width: 100%;
  90. height: 100%;
  91. }
  92. }
  93. .tab-top {
  94. display: flex;
  95. align-items: center;
  96. }
  97. }
  98. .zhsx-bottom {
  99. margin-top: 12px;
  100. background: #ffffff;
  101. position: relative;
  102. padding-bottom: 73px;
  103. .footer {
  104. height: 32px;
  105. display: flex;
  106. justify-content: flex-end;
  107. margin-top: 28px;
  108. }
  109. }
  110. }
  111. </style>
  112. <style lang="less">
  113. .zhsx-box {
  114. .el-dialog__header {
  115. padding: 16px 50px;
  116. }
  117. .el-dialog__title {
  118. font-size: 16px;
  119. font-family: PingFangSC-Medium, PingFang SC;
  120. font-weight: 500;
  121. color: rgba(0, 0, 0, 0.85);
  122. line-height: 24px;
  123. }
  124. .el-dialog__body {
  125. padding: 0 24px;
  126. height: 90%;
  127. }
  128. .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
  129. .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
  130. .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
  131. .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  132. padding-left: 16px;
  133. }
  134. .el-tabs--bottom .el-tabs__item.is-bottom:last-child,
  135. .el-tabs--bottom .el-tabs__item.is-top:last-child,
  136. .el-tabs--top .el-tabs__item.is-bottom:last-child,
  137. .el-tabs--top .el-tabs__item.is-top:last-child {
  138. padding-right: 16px;
  139. }
  140. .el-tabs__nav-wrap::after {
  141. height: 0;
  142. }
  143. .el-tabs__item {
  144. padding: 5px 16px;
  145. height: 30px;
  146. line-height: 22px;
  147. font-size: 14px;
  148. font-family: MicrosoftYaHei;
  149. color: rgba(31, 36, 41, 1);
  150. border: 1px solid rgba(195, 199, 203, 1);
  151. background: #fff;
  152. }
  153. /deep/.el-tabs__item:nth-child(2) {
  154. border-radius: 4px 0 0 4px;
  155. }
  156. /deep/.el-tabs__item:last-child {
  157. border-radius: 0 4px 4px 0;
  158. }
  159. .el-tabs,
  160. .el-tabs__content {
  161. height: 94%;
  162. }
  163. .el-tabs__active-bar {
  164. background-color: transparent !important;
  165. }
  166. .is-active {
  167. color: #025baa;
  168. border-color: #025baa;
  169. border-radius: 4px;
  170. }
  171. .el-tabs__header {
  172. margin: 0 0 12px;
  173. }
  174. .el-table td,
  175. .el-table th {
  176. padding: 8px 0;
  177. }
  178. .el-input--suffix .el-input__inner {
  179. padding-right: 20px;
  180. }
  181. @media screen and (max-width: 1366px) {
  182. /deep/ .el-table td {
  183. padding: 3px 0;
  184. }
  185. }
  186. }
  187. </style>