my.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. <template>
  2. <div>
  3. <el-row class="app-toptool" type="flex">
  4. <el-col :span="16">
  5. <Search
  6. size="small"
  7. :search-visible="searchVisible"
  8. :search-data.sync="searchData"
  9. :search-form="searchForm"
  10. @refesh_list="searchgo"
  11. />
  12. </el-col>
  13. <el-col :span="8">
  14. <div class="btn-group" style="margin-bottom:11px;float: right;">
  15. <div>
  16. </div>
  17. </div>
  18. </el-col>
  19. </el-row>
  20. <div>
  21. <el-table
  22. ref="multipleTable"
  23. v-loading="loading"
  24. :row-class-name="rowClass"
  25. row-key="id"
  26. :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
  27. :border="false"
  28. :stripe="true"
  29. class="eltable"
  30. :data="list"
  31. style="width: 100%"
  32. @selection-change="selection"
  33. >
  34. <el-table-column align="center" type="selection" width="42" />
  35. <el-table-column align="center" type="" property="id" label="编号" show-overflow-tooltip width="70" />
  36. <el-table-column
  37. align="left"
  38. property="title"
  39. label="小区名称"
  40. show-overflow-tooltip
  41. width=""
  42. />
  43. <el-table-column
  44. align="center"
  45. type=""
  46. property="image"
  47. label="图片"
  48. show-overflow-tooltip
  49. width="90"
  50. >
  51. <template slot-scope="scope">
  52. <div class="demo-image__preview">
  53. <el-image
  54. v-if="scope.row.image"
  55. class="table_list_pic"
  56. :src="scope.row.image"
  57. :preview-src-list="[scope.row.image]"
  58. />
  59. </div>
  60. </template>
  61. </el-table-column>
  62. <el-table-column
  63. align="left"
  64. type=""
  65. property="image"
  66. label="负责人"
  67. show-overflow-tooltip
  68. width="200"
  69. >
  70. <template slot-scope="scope">
  71. <div v-if="scope.row.tuanzhang">
  72. {{scope.row.tuanzhang.title}} {{scope.row.tuanzhang.tel}}
  73. </div>
  74. </template>
  75. </el-table-column>
  76. <el-table-column
  77. align="left"
  78. property="area_name"
  79. label="地区"
  80. show-overflow-tooltip
  81. width=""
  82. />
  83. <el-table-column
  84. align="left"
  85. property="house_number"
  86. label="地址"
  87. show-overflow-tooltip
  88. width=""
  89. />
  90. <el-table-column
  91. align="left"
  92. property="create_time"
  93. label="创建时间"
  94. show-overflow-tooltip
  95. width=""
  96. />
  97. </el-table>
  98. <Pagination
  99. :total="page_data.total"
  100. :page.sync="page_data.page"
  101. :limit.sync="page_data.limit"
  102. @pagination="index"
  103. />
  104. </div>
  105. </div>
  106. </template>
  107. <script>
  108. import Search from '@/components/common/Search'
  109. import Pagination from '@/components/Pagination'
  110. import {
  111. confirm,
  112. param2Obj
  113. } from '@/utils/common'
  114. export default {
  115. name: 'housingestatemy',
  116. components: {
  117. Search,
  118. Pagination
  119. },
  120. data() {
  121. return {
  122. ids: [],
  123. single: true,
  124. multiple: true,
  125. list: [],
  126. loading: false,
  127. ws: {},
  128. filename: '',
  129. page_data: {
  130. limit: 20,
  131. page: 1,
  132. total: 20
  133. },
  134. searchVisible: true,
  135. searchForm: [],
  136. searchData: {}
  137. }
  138. },
  139. mounted() {
  140. this.index()
  141. },
  142. methods: {
  143. searchgo() {
  144. this.page_data.page = 1;
  145. this.index()
  146. },
  147. index() {
  148. const param = {
  149. limit: this.page_data.limit,
  150. page: this.page_data.page
  151. }
  152. Object.assign(param, this.searchData)
  153. Object.assign(param, param2Obj(this.$route.fullPath))
  154. this.loading = true
  155. this.$api.post('/housingestate/my', param).then(res => {
  156. this.list = res.data.data
  157. this.page_data.total = res.data.total
  158. this.loading = false
  159. // console.log(this.page_data);
  160. if (this.page_data.page == 1) {
  161. this.searchForm = [
  162. {
  163. type: 'Input',
  164. label: '关键词',
  165. prop: 'keyword',
  166. width: '230px'
  167. }
  168. ]
  169. }
  170. })
  171. },
  172. selection(selection) {
  173. this.ids = selection.map(item => item.id)
  174. this.single = selection.length != 1
  175. this.multiple = !selection.length
  176. },
  177. rowClass({
  178. row,
  179. rowIndex
  180. }) {
  181. for (let i = 0; i < this.ids.length; i++) {
  182. if (row.id === this.ids[i]) {
  183. return 'rowLight'
  184. }
  185. }
  186. }
  187. }
  188. }
  189. </script>
  190. <style scoped>
  191. .table_list_pic {
  192. width: 80px;
  193. height: 80px;
  194. vertical-align: middle;
  195. }
  196. </style>