gcfz2.vue 6.0 KB

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