index.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <template>
  2. <div>
  3. <div class="flex-align-center flex-between mt-10">
  4. <el-input style="width:200px" size="small" suffix-icon="el-icon-search" v-model="param.content.where.condition" placeholder="搜索" @keyup.enter.native="listData(param.content.pageNumber = 1)" @clear="listData(param.content.pageNumber = 1)" clearable></el-input>
  5. </div>
  6. <div>
  7. <el-table
  8. height="60vh"
  9. ref="multipleTable"
  10. :data="tableData"
  11. style="width: 100%"
  12. size="mini"
  13. border>
  14. <el-table-column
  15. prop="enterprisename"
  16. :label="qiyi ? '企业名称' : '经销商名称'"
  17. width="180">
  18. </el-table-column>
  19. <el-table-column
  20. prop="agentnum"
  21. :label="qiyi ? '企业编号' : '经销商编号'"
  22. width="180">
  23. </el-table-column>
  24. <el-table-column
  25. prop="contact"
  26. label="联系人"
  27. width="90">
  28. </el-table-column>
  29. <el-table-column
  30. label="地址"
  31. width="180">
  32. <template slot-scope="scope">
  33. {{scope.row.province}}{{scope.row.city}}{{scope.row.county}}{{scope.row.address}}
  34. </template>
  35. </el-table-column>
  36. <el-table-column
  37. label="操作"
  38. width="90">
  39. <template slot-scope="scope">
  40. <el-button type="text" size="small" @click="selectRow(scope.row)">选 择</el-button>
  41. </template>
  42. </el-table-column>
  43. </el-table>
  44. <div style="margin-top:16px;text-align:right">
  45. <el-pagination
  46. background
  47. small
  48. @size-change="handleSizeChange"
  49. @current-change="handleCurrentChange"
  50. :current-page="currentPage"
  51. :page-size="param.content.pageSize"
  52. layout="total, prev, pager, next, jumper"
  53. :total="total">
  54. </el-pagination>
  55. </div>
  56. </div>
  57. </div>
  58. </template>
  59. <script>
  60. export default {
  61. props:['id'],
  62. data () {
  63. return {
  64. param:{
  65. "id": "",
  66. "content": {
  67. "pageNumber":1,
  68. "pageSize":20,
  69. "where":{
  70. "condition":""
  71. }
  72. }
  73. },
  74. tableData: [],
  75. total:0,
  76. currentPage:0
  77. }
  78. },
  79. props:{
  80. qiyi: {
  81. type:Boolean,
  82. default: () => false
  83. }
  84. },
  85. methods:{
  86. async listData () {
  87. this.param.id = this.id
  88. const res = await this.$api.requested(this.param)
  89. this.tableData = res.data
  90. this.total = res.total
  91. this.currentPage = res.pageNumber
  92. },
  93. handleSizeChange(val) {
  94. // console.log(`每页 ${val} 条`);
  95. this.param.content.pageSize = val
  96. this.listData()
  97. },
  98. handleCurrentChange(val) {
  99. // console.log(`当前页: ${val}`);
  100. this.param.content.pageNumber = val
  101. this.listData()
  102. },
  103. selectRow (row) {
  104. this.$emit('selectRow',row)
  105. }
  106. },
  107. mounted () {}
  108. }
  109. </script>
  110. <style>
  111. </style>