gcfzDialog.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. <template>
  2. <div class='dialog-container'>
  3. <el-dialog v-if='Object.keys(dialogInfo).length>0' :title='`${systemName}-${dialogInfo.label}`' :visible.sync='visible' :fullscreen='true'>
  4. <div v-if='dialogInfo.type==1' class='table-1'>
  5. <gcfz-table1 v-if='hztjTable.length>=0' :loading='loading' :hztjTable='hztjTable'></gcfz-table1>
  6. <p class='table1-p'>注:详细位置可在辅助用房管理平面图中查询</p>
  7. </div>
  8. <div v-if='dialogInfo.type==2' class='table-2'>
  9. <gcfz-table2
  10. v-if='bgjlTable.length>=0'
  11. :loading='loading'
  12. :total='total'
  13. :page='page'
  14. :size='size'
  15. :bgjlTable='bgjlTable'
  16. @queryChange='queryChange'
  17. @changeEmit='changeEmit'
  18. ></gcfz-table2>
  19. </div>
  20. </el-dialog>
  21. </div>
  22. </template>
  23. <script>
  24. import Select from '@/components/Select/Select.vue'
  25. import gcfzTable1 from './gcfz1'
  26. import gcfzTable2 from './gcfz2'
  27. import { querygcfzyfhz, queryfzyfchange } from '@/api/other.js'
  28. export default {
  29. props: ['systemName'],
  30. data() {
  31. return {
  32. visible: false,
  33. dialogInfo: {},
  34. loading: true,
  35. hztjTable: [],
  36. total: 0,
  37. page: 1,
  38. size: 10,
  39. floor: '',
  40. bgjlTable: [],
  41. floors: '',
  42. searVal: '',
  43. dateVal: ''
  44. }
  45. },
  46. mounted() {
  47. this.floor = this.$cookie.get('floorNow') || '1F'
  48. },
  49. components: { Select, gcfzTable1, gcfzTable2 },
  50. methods: {
  51. // 辅助用房管理-汇总统计报
  52. query() {
  53. let getParams = {
  54. plazaId: this.$store.state.plazaId,
  55. orderBy: 'floor,1'
  56. }
  57. querygcfzyfhz({ getParams }).then(res => {
  58. if (res.result == 'success') {
  59. console.log('汇总统计报', res)
  60. this.loading = false
  61. this.hztjTable = res.data ? res.data : []
  62. }
  63. })
  64. },
  65. changeEmit(val) {
  66. console.log(val)
  67. if (val.floors) {
  68. this.floors = val.floors
  69. }
  70. if (val.searVal) {
  71. this.searVal = val.searVal
  72. }
  73. if (val.dateVal) {
  74. this.dateVal = val.dateVal
  75. }
  76. this.queryChange()
  77. },
  78. // 变更记录
  79. queryChange() {
  80. let getParams = {
  81. plazaId: this.$store.state.plazaId,
  82. page: this.page,
  83. size: this.size
  84. }
  85. if (this.floors) {
  86. getParams.floor = this.floors
  87. }
  88. if (this.searVal) {
  89. getParams.keyword = `${this.searVal}:region`
  90. }
  91. if (this.dateVal) {
  92. getParams.changedateStartDate = this.dateVal[0] + '000000'
  93. getParams.changedateEndDate = this.dateVal[1] + '000000'
  94. }
  95. queryfzyfchange({ getParams }).then(res => {
  96. if (res.result == 'success') {
  97. console.log('变更记录', res)
  98. this.total = res.count
  99. this.loading = false
  100. this.bgjlTable = res.data ? res.data : []
  101. }
  102. })
  103. },
  104. showModal(item) {
  105. this.visible = true
  106. this.dialogInfo = item
  107. if (this.dialogInfo.type == 1) {
  108. this.query()
  109. } else {
  110. this.queryChange()
  111. }
  112. }
  113. }
  114. }
  115. </script>
  116. <style lang="less" scoped>
  117. .table-1 {
  118. padding: 16px 24px 24px 24px;
  119. .table1-p {
  120. height: 48px;
  121. font-size: 14px;
  122. font-family: MicrosoftYaHei;
  123. color: rgba(31, 36, 41, 1);
  124. line-height: 48px;
  125. margin-top: 8px;
  126. }
  127. }
  128. .table-2 {
  129. position: relative;
  130. padding: 12px 12px 52px 12px;
  131. }
  132. </style>
  133. <style lang="less">
  134. .dialog-container {
  135. .el-table td,
  136. .el-table th {
  137. padding: 8px 0;
  138. }
  139. .el-input--suffix .el-input__inner {
  140. padding-right: 20px;
  141. }
  142. }
  143. .el-dialog__wrapper {
  144. transition-duration: 0.3s;
  145. }
  146. .dialog-fade-enter-active {
  147. animation: none !important;
  148. }
  149. .dialog-fade-leave-active {
  150. transition-duration: 0.15s !important;
  151. animation: none !important;
  152. }
  153. .dialog-fade-enter-active .el-dialog,
  154. .dialog-fade-leave-active .el-dialog {
  155. animation-fill-mode: forwards;
  156. }
  157. .dialog-fade-enter-active .el-dialog {
  158. animation-duration: 0.3s;
  159. animation-name: anim-open;
  160. animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
  161. }
  162. .dialog-fade-leave-active .el-dialog {
  163. animation-duration: 0.3s;
  164. animation-name: anim-close;
  165. }
  166. @keyframes anim-open {
  167. 0% {
  168. opacity: 0;
  169. transform: scale3d(0, 0, 1);
  170. }
  171. 100% {
  172. opacity: 1;
  173. transform: scale3d(1, 1, 1);
  174. }
  175. }
  176. @keyframes anim-close {
  177. 0% {
  178. opacity: 1;
  179. }
  180. 100% {
  181. opacity: 0;
  182. transform: scale3d(0.5, 0.5, 1);
  183. }
  184. }
  185. </style>