邃芒慧影管理端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

161 lines
3.8 KiB

  1. <template>
  2. <div class="page justify-around">
  3. <div class="addbtn">
  4. <el-form :inline="true" :model="formInline" class="demo-form-inline">
  5. <el-form-item label="手机号">
  6. <el-input v-model="formInline.phone" placeholder="请输入手机号" clearable />
  7. </el-form-item>
  8. <el-form-item label="模版号">
  9. <el-input v-model="formInline.mouldSmIdLike" placeholder="请输入模版号" clearable />
  10. </el-form-item>
  11. <el-form-item>
  12. <el-button type="primary" @click="getListData"><el-icon><i-ep-plus /></el-icon> 查询</el-button>
  13. </el-form-item>
  14. </el-form>
  15. </div>
  16. <el-table
  17. :data="tableData"
  18. style="width: 100%; height: 90%"
  19. size="large"
  20. align="center"
  21. border
  22. >
  23. <el-table-column
  24. prop="name"
  25. label="模板信息"
  26. align="center"
  27. />
  28. <el-table-column
  29. prop="address"
  30. label="手机号"
  31. align="center"
  32. />
  33. <el-table-column
  34. prop="createDate"
  35. label="注册时间"
  36. align="center"
  37. >
  38. <template #default="scope">
  39. {{ getDate(scope.row.createDate) }}
  40. </template>
  41. </el-table-column>
  42. </el-table>
  43. <!-- 登录账号 -->
  44. <div class="pagination">
  45. <el-pagination
  46. v-model:current-page="pageNum"
  47. v-model:page-size="pageSize"
  48. :page-sizes="[10, 50, 100]"
  49. :small="false"
  50. :disabled="false"
  51. :background="true"
  52. layout="total, sizes, prev, pager, next, jumper"
  53. :total="total"
  54. @size-change="handleSizeChange"
  55. @current-change="handleCurrentChange"
  56. />
  57. </div>
  58. </div>
  59. </template>
  60. <!-- videoType==1为竖,==2为横 -->
  61. <script setup>
  62. //#region 导入
  63. import { userMouldListApi } from '@/apis/userManage.js'
  64. import { useI18n } from "vue-i18n";
  65. import dayjs from "dayjs";
  66. import { useRoute, useRouter } from "vue-router";
  67. const route = useRoute();
  68. const router = useRouter();
  69. const { locale } = useI18n();
  70. const lanChange = ref(locale);
  71. const tableData = ref([]);
  72. const pageNum = ref(1);
  73. const pageSize = ref(10);
  74. const total = ref(0);
  75. const getDate = (val) => {
  76. return dayjs(val).format("YYYY-MM-DD");
  77. };
  78. const handleSizeChange = (val) => {
  79. pageSize.value = val;
  80. getListData(pageNum.value, pageSize.value);
  81. };
  82. const handleCurrentChange = (val) => {
  83. pageNum.value = val;
  84. getListData(pageNum.value, pageSize.value);
  85. };
  86. const formInline = ref({
  87. phone: '',
  88. mouldSmIdLike: ''
  89. })
  90. const getListData = async (PageNum, PageSize) => {
  91. try {
  92. let data = {
  93. PageNum: PageNum || 1,
  94. PageSize: PageSize || 10,
  95. phone: formInline.phone,
  96. mouldSmIdLike: formInline.mouldSmIdLike
  97. }
  98. const res = await userMouldListApi(data);
  99. console.log(res, "res");
  100. tableData.value = res.data.list;
  101. total.value = res.data.total * 1;
  102. } catch (error) {
  103. console.log(error, "err");
  104. }
  105. };
  106. onMounted(() => {
  107. getListData(1, 10);
  108. });
  109. </script>
  110. <style lang="scss" scoped>
  111. .page {
  112. height: calc(100vh - 80px);
  113. // height: calc(100vh - 80px);
  114. background-color: #ffffff;
  115. border-radius: 30px 0 0 0;
  116. overflow: hidden;
  117. padding: 10vh;
  118. .addbtn {
  119. margin-bottom: 2vh;
  120. }
  121. .formData {
  122. padding: 5vh 3vh;
  123. }
  124. .pagination {
  125. position: fixed;
  126. left: 55%;
  127. bottom: 8vh;
  128. transform: translateX(-50%);
  129. border-radius: 5px;
  130. padding: 10px 20px;
  131. z-index: 99;
  132. transition: all 0.3s;
  133. cursor: pointer;
  134. &:hover {
  135. background-color: #b8b8b873;
  136. }
  137. }
  138. }
  139. </style>