list.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. <template>
  2. <div class="container normal-panel">
  3. <p class="normal-title normal-margin">经销商信息</p>
  4. <div class="flex-align-center flex-between normal-margin">
  5. <!-- <el-input style="width:270px" placeholder="请输入内容" v-model="param.content.where.condition" class="input-with-select" size="small" clearable>
  6. <el-button slot="append" icon="el-icon-search" @click="query_agent(param.content.sa_saleareaid)">查 询</el-button>
  7. </el-input> -->
  8. <div class="flex-align-center search-panel">
  9. <p>搜索:</p>
  10. <el-input style="width:200px" size="small" placeholder="请输入查询内容" @keyup.native.enter="query_agent(param.content.sa_saleareaids[0])" @clear="(param.content.where.condition = '',query_agent(param.content.sa_saleareaids[0]))" v-model="param.content.where.condition" prefix-icon="el-icon-search" clearable></el-input>
  11. </div>
  12. <slot name="add"></slot>
  13. </div>
  14. <tableLayout :layout="tablecols" :data="list" :custom="true" height="calc(100vh - 495px)">
  15. <template v-slot:customcol="scope">
  16. <p v-if="scope.column.columnname === 'status'">
  17. <span :style="scope.column.data.status === '启用'?'color:#52C41A':'color:#FF3B30'">{{scope.column.data.status}}</span>
  18. </p>
  19. <p v-else-if="scope.column.columnname === 'province'">
  20. <span>{{scope.column.data.province}} - {{scope.column.data.city}} - {{scope.column.data.county}}</span>
  21. </p>
  22. <p v-else>{{scope.column.data[scope.column.columnname]}}</p>
  23. </template>
  24. <template v-slot:opreation="scope">
  25. <slot name="detail" :data="scope.data"></slot>
  26. <slot name="edit" :data="scope.data"></slot>
  27. <slot name="start" :data="scope.data"></slot>
  28. <slot name="del" :data="scope.data"></slot>
  29. </template>
  30. </tableLayout>
  31. <div style="margin-top:16px;text-align:right">
  32. <el-pagination
  33. background
  34. small
  35. @size-change="handleSizeChange"
  36. @current-change="handleCurrentChange"
  37. :current-page="currentPage"
  38. :page-size="param.content.pageSize"
  39. layout="total, prev, pager, next, jumper"
  40. :total="total">
  41. </el-pagination>
  42. </div>
  43. </div>
  44. </template>
  45. <script>
  46. export default {
  47. props:['data'],
  48. data () {
  49. return {
  50. tablecols:[],
  51. list:[],
  52. total:0,
  53. currentPage:1,
  54. param:{
  55. "classname": "webmanage.sale.salearea.salearea",
  56. "method": "query_agent",
  57. "content": {
  58. "pageSize":20,
  59. "pageNumber":1,
  60. "sa_saleareaids":'',
  61. "containssub": 1,
  62. "where":{}
  63. }
  64. }
  65. }
  66. },
  67. methods:{
  68. async query_agent (sa_saleareaid) {
  69. this.param.content.sa_saleareaids = [sa_saleareaid]
  70. const res = await this.$api.requested(this.param)
  71. this.list = res.data
  72. this.total = res.total
  73. this.currentPage = res.pageNumber
  74. },
  75. handleSizeChange(val) {
  76. // console.log(`每页 ${val} 条`);
  77. this.param.content.pageSize = val
  78. this.query_agent(this.param.content.sa_saleareaids[0])
  79. },
  80. handleCurrentChange(val) {
  81. // console.log(`当前页: ${val}`);
  82. this.param.content.pageNumber = val
  83. this.query_agent(this.param.content.sa_saleareaids[0])
  84. }
  85. },
  86. mounted () {
  87. // this.query_agent()
  88. },
  89. created () {
  90. // 获取表结构
  91. this.tablecols = this.tool.tabelCol(this.$route.name)['agentTable'].tablecols
  92. }
  93. }
  94. </script>
  95. <style>
  96. </style>
  97. <style scoped>
  98. .search-panel p{
  99. width:40px;
  100. font-size:14px
  101. }
  102. </style>