list.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. <template>
  2. <div>
  3. <select_proGro @searchActive="searchActive" ></select_proGro>
  4. <table1 :layout="tablecols" :data="list" :opwidth="200" :custom="true" :height="tableHieght" :checkbox="true" v-on="$listeners">
  5. <template v-slot:customcol="scope">
  6. <div v-if="scope.column.columnname === 'isonsale'">
  7. <span v-if="scope.column.data[scope.column.columnname] === 0"
  8. >下架
  9. </span>
  10. <span v-if="scope.column.data[scope.column.columnname] === 1"
  11. >上架
  12. </span>
  13. </div>
  14. <p v-else>{{scope.column.data[scope.column.columnname]}}</p>
  15. </template>
  16. <template v-slot:opreation="scope">
  17. <div>
  18. <slot name="detail" :data="scope.data"></slot>
  19. <slot name="edit" :data="scope.data"></slot>
  20. <slot name="up" :data="scope.data"></slot>
  21. <slot name="down" :data="scope.data"></slot>
  22. <slot name="del" :data="scope.data"></slot>
  23. </div>
  24. </template>
  25. </table1>
  26. <!-- </tableLayout> -->
  27. <div style="margin-top:16px;text-align:right">
  28. <el-pagination
  29. background
  30. small
  31. @size-change="handleSizeChange"
  32. @current-change="handleCurrentChange"
  33. :current-page="currentPage"
  34. :page-size="params.content.pageSize"
  35. layout="total, prev, pager, next, jumper"
  36. :total="total">
  37. </el-pagination>
  38. </div>
  39. </div>
  40. </template>
  41. <script>
  42. import select_proGro from './search'
  43. import table1 from './table'
  44. export default {
  45. name: "list",
  46. data() {
  47. return {
  48. tableHieght:400,
  49. tablecols:[],
  50. list:[],
  51. total:0,
  52. currentPage:0,
  53. isonsale:true,
  54. isonsales:false,
  55. params:{
  56. "id": "20220922164403",
  57. "version":1,
  58. "content": {
  59. pageNumber:1,
  60. pageSize:10,
  61. "nocache":true,
  62. "where":{
  63. "condition":""
  64. }
  65. }
  66. }
  67. }
  68. },
  69. components:{
  70. select_proGro,
  71. table1
  72. },
  73. mounted() {
  74. this.listData();
  75. },
  76. methods:{
  77. async listData(){
  78. const res=await this.$api.requested(this.params)
  79. this.list = res.data
  80. this.total = res.total
  81. this.currentPage = res.pageNumber
  82. },
  83. searchActive(data) {
  84. this.params.content.where.condition = data
  85. this.listData()
  86. },
  87. handleSizeChange(val) {
  88. // console.log(`每页 ${val} 条`);
  89. this.params.content.pageSize = val
  90. this.listData()
  91. },
  92. handleCurrentChange(val) {
  93. // console.log(`当前页: ${val}`);
  94. this.params.content.pageNumber = val
  95. this.listData()
  96. },
  97. },
  98. created() {
  99. this.tablecols = this.tool.tabelCol(this.$route.name).productGroupTable.tablecols
  100. }
  101. }
  102. </script>
  103. <style>
  104. </style>