gcfz2.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. <template>
  2. <div class='gcfz2'>
  3. <div class='table-2-input'>
  4. <el-date-picker size='small' v-model='dateVal' type='date' style='margin-right:12px;width:140px' placeholder='记录日期'></el-date-picker>
  5. <Select width='130' tipPlace='top' caption='楼层:' size='small' style='margin-right:12px' :selectdata='floorSelect' :placeholder='"请选择"'></Select>
  6. <el-input placeholder='请按照区域搜索' size='small' style='width:200px' prefix-icon='el-icon-search' v-model='searVal'></el-input>
  7. </div>
  8. <div class='table-2-table'>
  9. <el-table
  10. :header-cell-style='{background:"rgba(245,246,247,1)",fontFamily:"MicrosoftYaHei",color:"rgba(100,108,115,1)",lineHeight:"16px",fontSize:"12px"}'
  11. v-loading='loading'
  12. :data='bgjlTable'
  13. style='width: 100%'
  14. >
  15. <el-table-column label='序号' type='index' width='50'></el-table-column>
  16. <el-table-column prop label='楼层' width='130'>
  17. <template slot-scope='{row}'>{{row.floor||'--'}}</template>
  18. </el-table-column>
  19. <el-table-column prop label='库存变化' align='center'>
  20. <el-table-column prop label='新增(间)'>
  21. <template slot-scope='{row}'>{{row.xzkf||'--'}}</template>
  22. </el-table-column>
  23. <el-table-column prop label='减少(间)'>
  24. <template slot-scope='{row}'>{{row.jskf||'--'}}</template>
  25. </el-table-column>
  26. </el-table-column>
  27. <el-table-column prop label='区域(㎡)'>
  28. <template slot-scope='{row}'>{{row.region||'--'}}</template>
  29. </el-table-column>
  30. <el-table-column prop label='面积(㎡)'>
  31. <template slot-scope='{row}'>{{row.area||'--'}}</template>
  32. </el-table-column>
  33. <el-table-column prop label='调整后库房总数(间)' width='170'>
  34. <template slot-scope='{row}'>{{row.afterkf||'--'}}</template>
  35. </el-table-column>
  36. <el-table-column prop label='记录日期' width='130' :sortable='true'>
  37. <template slot-scope='{row}'>{{row.changedate||'--'}}</template>
  38. </el-table-column>
  39. </el-table>
  40. </div>
  41. <div class='table-2-p'>注:广场辅助用房使用信息变更时,需同步调整对应楼层辅助用房管理平面图</div>
  42. <div class='foot'>
  43. <el-pagination
  44. background
  45. layout='prev, pager, next'
  46. :total='total'
  47. :page-size='size'
  48. @prev-click='pageChanged'
  49. @next-click='pageChanged'
  50. @current-change='pageChanged'
  51. ></el-pagination>
  52. </div>
  53. </div>
  54. </template>
  55. <script>
  56. import Select from '@/components/Select/Select.vue'
  57. import { mapGetters } from 'vuex'
  58. export default {
  59. data() {
  60. return {
  61. dateVal: '',
  62. searVal: ''
  63. }
  64. },
  65. computed: {
  66. ...mapGetters(['floorSelect'])
  67. },
  68. props: ['bgjlTable', 'total', 'page', 'size', 'loading'],
  69. components: { Select },
  70. methods: {
  71. pageChanged(page) {
  72. this.page = page
  73. this.$emit('queryChange')
  74. }
  75. }
  76. }
  77. </script>
  78. <style lang="less" scoped>
  79. .gcfz2 {
  80. .table-2-input {
  81. display: flex;
  82. align-items: center;
  83. }
  84. .table-2-table {
  85. margin-top: 10px;
  86. }
  87. .table-2-p {
  88. height: 48px;
  89. font-size: 14px;
  90. font-family: MicrosoftYaHei;
  91. color: rgba(31, 36, 41, 1);
  92. line-height: 48px;
  93. }
  94. .foot {
  95. height: 32px;
  96. display: flex;
  97. justify-content: flex-end;
  98. margin-top: 28px;
  99. }
  100. }
  101. </style>