gcfz2.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. <template>
  2. <div class='gcfz2'>
  3. <div class='table-2-input'>
  4. <div class='picker-box'>
  5. <span class='picker-span'>记录日期:</span>
  6. <el-date-picker
  7. v-model='cg.dateVal'
  8. value-format='yyyyMMdd'
  9. type='daterange'
  10. size='mini'
  11. style='width:190px'
  12. range-separator='-'
  13. start-placeholder
  14. end-placeholder
  15. @change='changelc'
  16. ></el-date-picker>
  17. </div>
  18. <Select
  19. width='200'
  20. tipPlace='top'
  21. @change='changelc'
  22. caption='楼层:'
  23. v-model='cg.floors'
  24. size='small'
  25. style='margin-right:12px'
  26. :selectdata='floorSelect'
  27. :placeholder='"选择楼层"'
  28. ></Select>
  29. <el-input @change='changelc' placeholder='搜索区域' size='small' style='width:200px' prefix-icon='el-icon-search' v-model='cg.searVal'></el-input>
  30. </div>
  31. <div class='table-2-table'>
  32. <el-table
  33. :header-cell-style='{background:"rgba(245,246,247,1)",fontFamily:"MicrosoftYaHei",color:"rgba(100,108,115,1)",lineHeight:"16px",fontSize:"12px"}'
  34. v-loading='loading'
  35. :data='bgjlTable'
  36. style='width: 100%'
  37. border
  38. >
  39. <el-table-column label='序号' type='index' width='50'></el-table-column>
  40. <el-table-column prop label='楼层' width='130'>
  41. <template slot-scope='{row}'>{{row.floor||'--'}}</template>
  42. </el-table-column>
  43. <el-table-column prop label='库存变化' align='center'>
  44. <el-table-column prop label='新增(间)'>
  45. <template slot-scope='{row}'>{{row.xzkf||'--'}}</template>
  46. </el-table-column>
  47. <el-table-column prop label='减少(间)'>
  48. <template slot-scope='{row}'>{{row.jskf||'--'}}</template>
  49. </el-table-column>
  50. </el-table-column>
  51. <el-table-column prop label='区域(㎡)'>
  52. <template slot-scope='{row}'>{{row.region||'--'}}</template>
  53. </el-table-column>
  54. <el-table-column prop label='面积(㎡)'>
  55. <template slot-scope='{row}'>{{row.area||'--'}}</template>
  56. </el-table-column>
  57. <el-table-column prop label='调整后库房总数(间)' width='170'>
  58. <template slot-scope='{row}'>{{row.afterkf||'--'}}</template>
  59. </el-table-column>
  60. <el-table-column prop label='记录日期' width='130' :sortable='true'>
  61. <template slot-scope='{row}'>{{row.changedate||'--'}}</template>
  62. </el-table-column>
  63. </el-table>
  64. </div>
  65. <div class='table-2-p'>注:广场辅助用房使用信息变更时,需同步调整对应楼层辅助用房管理平面图</div>
  66. <div class='foot'>
  67. <el-pagination
  68. background
  69. layout='prev, pager, next'
  70. :total='total'
  71. :page-size='size'
  72. @prev-click='pageChanged'
  73. @next-click='pageChanged'
  74. @current-change='pageChanged'
  75. ></el-pagination>
  76. </div>
  77. </div>
  78. </template>
  79. <script>
  80. import Select from '@/components/Select/Select.vue'
  81. import { mapGetters } from 'vuex'
  82. export default {
  83. data() {
  84. return {
  85. dateVal: '',
  86. searVal: '',
  87. cg: {
  88. dateVal: '',
  89. floors: '',
  90. searVal: ''
  91. }
  92. }
  93. },
  94. computed: {
  95. ...mapGetters(['floorSelect'])
  96. },
  97. props: ['bgjlTable', 'total', 'page', 'size', 'loading'],
  98. components: { Select },
  99. methods: {
  100. pageChanged(page) {
  101. this.page = page
  102. this.$emit('queryChange')
  103. },
  104. changelc() {
  105. this.$emit('changeEmit', this.cg)
  106. }
  107. }
  108. }
  109. </script>
  110. <style lang="less" scoped>
  111. .gcfz2 {
  112. .table-2-input {
  113. display: flex;
  114. align-items: center;
  115. }
  116. .table-2-table {
  117. margin-top: 10px;
  118. }
  119. .table-2-p {
  120. height: 48px;
  121. font-size: 14px;
  122. font-family: MicrosoftYaHei;
  123. color: rgba(31, 36, 41, 1);
  124. line-height: 48px;
  125. }
  126. .foot {
  127. height: 32px;
  128. display: flex;
  129. justify-content: flex-end;
  130. margin-top: 28px;
  131. }
  132. .picker-box {
  133. display: flex;
  134. align-items: center;
  135. background: #fff;
  136. padding: 0 6px;
  137. border: 1px solid #dcdfe6;
  138. border-radius: 4px;
  139. height: 32px;
  140. box-sizing: border-box;
  141. margin-right: 12px;
  142. .picker-span {
  143. margin-right: 6px;
  144. color: rgba(0, 0, 0, 0.65);
  145. }
  146. }
  147. }
  148. </style>
  149. <style lang="less">
  150. .gcfz2 {
  151. .picker-box {
  152. .el-input__inner {
  153. border: none;
  154. }
  155. .el-range-editor.el-input__inner {
  156. padding: 3px 0px;
  157. }
  158. .el-icon-date {
  159. display: none;
  160. }
  161. .el-range__close-icon {
  162. position: absolute;
  163. right: 0px;
  164. top: 2px;
  165. }
  166. .el-range-editor--mini .el-range-input {
  167. font-size: 14px;
  168. color: rgb(31, 36, 41);
  169. }
  170. }
  171. }
  172. </style>