zwTable.vue 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. <!--专维-->
  2. <template>
  3. <div class='zw-list'>
  4. <div class='eq-list-top'>
  5. <el-date-picker size='small' v-model='nd' type='date' placeholder='请选择年度' @change='getList' style='width:180px;margin-right:12px'></el-date-picker>
  6. <Select width='146' tipPlace='top' caption='类别:' :selectdata='dataSelect2' :placeholder='"请选择"' @change='getList'></Select>
  7. <Select width='120' tipPlace='top' caption='项目 :' :selectdata='floorSelect' style='margin:0 12px' @change='getList'></Select>
  8. <Select
  9. width='224'
  10. tipPlace='top'
  11. caption='当前阶段'
  12. :selectdata='dataSelect2'
  13. :placeholder='"请选择"'
  14. @change='getList'
  15. style='width:146px;margin-right:12px'
  16. ></Select>
  17. <el-date-picker size='small' v-model='lxsjwcsj' type='date' placeholder='选择立项日期' @change='getList' style='width:180px;margin-right:12px'></el-date-picker>
  18. <el-date-picker size='small' v-model='yssjwcsj' type='date' placeholder='选择验收日期' @change='getList' style='width:180px;margin-right:12px'></el-date-picker>
  19. <Select width='180' tipPlace='top' caption='验收结果' :selectdata='dataSelect2' :placeholder='"请选择"' @change='getList'></Select>
  20. <el-input
  21. placeholder='请按照按照实施方案说明搜索'
  22. size='small'
  23. @change='getList'
  24. prefix-icon='el-icon-search'
  25. v-model='keyword'
  26. style='width:192px;margin-right:12px'
  27. ></el-input>
  28. </div>
  29. <el-table :data='tableData' :border='true' style='width: 100%'>
  30. <el-table-column type='index' label='序号' width='80'></el-table-column>
  31. <el-table-column prop='nd' label='年度' width='160' show-overflow-tooltip resizable>
  32. <template slot-scope='{row}'>{{row.nd || '--'}}</template>
  33. </el-table-column>
  34. <el-table-column prop='qs' label='期数' width='160' show-overflow-tooltip resizable>
  35. <template slot-scope='{row}'>{{row.qs || '--'}}</template>
  36. </el-table-column>
  37. <el-table-column prop='lb' label='类别' show-overflow-tooltip resizable>
  38. <template slot-scope='{row}'>{{row.lb || '--'}}</template>
  39. </el-table-column>
  40. <el-table-column prop='xm' label='项目' show-overflow-tooltip resizable>
  41. <template slot-scope='{row}'>{{row.xm || '--'}}</template>
  42. </el-table-column>
  43. <el-table-column prop='sl' label='数量' show-overflow-tooltip resizable>
  44. <template slot-scope='{row}'>{{row.sl || '--'}}</template>
  45. </el-table-column>
  46. <el-table-column prop='ssfasm' label='实施方案说明' show-overflow-tooltip resizable width='200'>
  47. <template slot-scope='{row}'>{{row.ssfasm || '--'}}</template>
  48. </el-table-column>
  49. <el-table-column prop='sxjd' label='当前阶段' show-overflow-tooltip resizable width='140'>
  50. <template slot-scope='{row}'>{{row.sxjd || '--'}}</template>
  51. </el-table-column>
  52. <el-table-column prop='lxsjwcsj' label='立项日期' show-overflow-tooltip resizable>
  53. <template slot-scope='{row}'>{{row.lxsjwcsj || '--'}}</template>
  54. </el-table-column>
  55. <el-table-column prop='yssjwcsj' label='验收日期' show-overflow-tooltip resizable>
  56. <template slot-scope='{row}'>{{row.yssjwcsj || '--'}}</template>
  57. </el-table-column>
  58. <el-table-column prop='status' label='验收结果' show-overflow-tooltip resizable>
  59. <template slot-scope='{row}'>{{row.status || '--'}}</template>
  60. </el-table-column>
  61. <el-table-column prop='zfje' label='结算金额' show-overflow-tooltip resizable>
  62. <template slot-scope='{row}'>{{row.zfje || '--'}}</template>
  63. </el-table-column>
  64. <el-table-column prop='xlcfwz' label='资料存放位置' width='180' show-overflow-tooltip resizable>
  65. <template slot-scope='{row}'>{{row.xlcfwz || '--'}}</template>
  66. </el-table-column>
  67. </el-table>
  68. <div class='foot'>
  69. <el-pagination
  70. background
  71. layout='prev, pager, next'
  72. :total='total/size'
  73. :page-size='size'
  74. @prev-click='pageChanged'
  75. @next-click='pageChanged'
  76. @current-change='pageChanged'
  77. ></el-pagination>
  78. </div>
  79. </div>
  80. </template>
  81. <script>
  82. import Select from '@/components/Select/Select.vue'
  83. import { queryZw } from '@/api/equipmentList.js'
  84. import { mapGetters } from 'vuex'
  85. export default {
  86. components: { Select },
  87. data() {
  88. return {
  89. dataSelect2: [
  90. { id: 'test1', name: '选择项' },
  91. { id: 'test2', name: '单平米' },
  92. { id: 'test3', name: '下级分项' },
  93. { id: 'test4', name: '滑动平均滑动平均' }
  94. ],
  95. tableData: [],
  96. total: 0,
  97. currentPage: 1,
  98. yssjwcsj: '',
  99. lxsjwcsj: '',
  100. size: 10
  101. }
  102. },
  103. computed: {
  104. ...mapGetters(['floorSelect'])
  105. },
  106. props: ['smsxt', ''],
  107. methods: {
  108. pageChanged(page, size) {
  109. this.currentPage = page
  110. this.size = size
  111. this.getList()
  112. },
  113. //下拉框查询
  114. tabFind() {
  115. let postParams = [
  116. {
  117. columnName: { nd: 'nd', lb: 'lb', xm: 'xm', sxjd: 'sxjd' },
  118. params: {
  119. // tab_code: this.param
  120. },
  121. tableName: 'glsms_asset' //视图名称
  122. }
  123. ]
  124. // let major
  125. // if (this.major.slice(0, 2) == 'GD') {
  126. // major = '供电'
  127. // } else if (this.major.slice(0, 2) == 'XF') {
  128. // major = '消防'
  129. // } else if (this.major.slice(0, 2) == 'GPS') {
  130. // major = '给排水'
  131. // } else if (this.major.slice(0, 2) == 'DT') {
  132. // major = '电梯'
  133. // } else if (this.major.slice(0, 2) == 'RQ') {
  134. // major = '燃气'
  135. // } else {
  136. // major = this.major
  137. // }
  138. let data = {
  139. major: this.major,
  140. plazaId: this.$store.state.plazaId
  141. }
  142. querySelect({ data, postParams }).then(res => {
  143. console.log(res)
  144. let sb_status = res.data.data.glsms_asset.sb_status
  145. let sbglgs = res.data.data.glsms_asset.sbglgs
  146. this.sbglgsOption = []
  147. this.statusOption = []
  148. sb_status.forEach(el => {
  149. this.statusOption.push({
  150. name: el.value,
  151. id: el.key
  152. })
  153. })
  154. sbglgs.forEach(el => {
  155. this.sbglgsOption.push({
  156. name: el.value,
  157. id: el.key
  158. })
  159. })
  160. })
  161. },
  162. getList() {
  163. let getParams = {
  164. data: {
  165. smsxt: this.smsxt,
  166. // tab: this.major,
  167. // plazaId: this.$store.state.plazaId,
  168. plazaId: '1000287',
  169. page: this.currentPage,
  170. size: this.size
  171. }
  172. }
  173. queryZw(getParams).then(res => {
  174. this.tableData = res.data || []
  175. this.total = res.count
  176. })
  177. }
  178. },
  179. watch: {
  180. smsxt(newV, oldV) {
  181. if (newV !== oldV) {
  182. this.getList()
  183. }
  184. }
  185. },
  186. mounted() {
  187. // this.tabFind()
  188. this.getList()
  189. }
  190. }
  191. </script>
  192. <style lang="less" scoped>
  193. .zw-list {
  194. .eq-list-top {
  195. display: flex;
  196. height: 90px;
  197. flex-wrap: wrap;
  198. }
  199. td {
  200. overflow: hidden;
  201. text-overflow: ellipsis;
  202. white-space: nowrap;
  203. }
  204. .foot {
  205. height: 32px;
  206. display: flex;
  207. justify-content: flex-end;
  208. margin-top: 28px;
  209. }
  210. }
  211. </style>