邃芒慧影管理端
Non puoi selezionare più di 25 argomenti Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
 
 
 
 

180 righe
4.5 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="$t('userMouldList.phone')">
  6. <el-input v-model="formInline.phone" :placeholder="$t('userMouldList.phonePlaceholder')" clearable />
  7. </el-form-item>
  8. <el-form-item :label="$t('userMouldList.mouldSmId')">
  9. <el-input v-model="formInline.mouldSmIdLike" :placeholder="$t('userMouldList.mouldSmIdPlaceholder')" clearable />
  10. </el-form-item>
  11. <el-form-item>
  12. <el-button type="primary" @click="getListData()">{{$t('userMouldList.search')}}</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="coverImg"
  25. :label="$t('userMouldList.coverImg')"
  26. align="center"
  27. >
  28. <template #default="scope">
  29. <img :src="scope.row.coverImg" width="50" height="50" alt="" />
  30. </template>
  31. </el-table-column>
  32. <el-table-column
  33. prop="mouldSmId"
  34. :label="$t('userMouldList.mouldSmId')"
  35. align="center"
  36. />
  37. <el-table-column
  38. prop="wxCUserBasicInfoList"
  39. :label="$t('userMouldList.bindPhone')"
  40. align="center"
  41. >
  42. <template #default="scope">
  43. {{ getListPhone(scope.row.wxCUserBasicInfoList) }}
  44. </template>
  45. </el-table-column>
  46. <el-table-column
  47. prop="createDate"
  48. :label="$t('userMouldList.createDate')"
  49. align="center"
  50. >
  51. <template #default="scope">
  52. {{ getDate(scope.row.createDate) }}
  53. </template>
  54. </el-table-column>
  55. </el-table>
  56. <div class="pagination">
  57. <el-pagination
  58. v-model:current-page="pageNum"
  59. v-model:page-size="pageSize"
  60. :page-sizes="[10, 50, 100]"
  61. :small="false"
  62. :disabled="false"
  63. :background="true"
  64. layout="total, sizes, prev, pager, next, jumper"
  65. :total="total"
  66. @size-change="handleSizeChange"
  67. @current-change="handleCurrentChange"
  68. />
  69. </div>
  70. </div>
  71. </template>
  72. <!-- videoType==1为竖,==2为横 -->
  73. <script setup>
  74. //#region 导入
  75. import { userMouldListApi } from '@/apis/userManage.js'
  76. import { useI18n } from "vue-i18n";
  77. import dayjs from "dayjs";
  78. import { useRoute, useRouter } from "vue-router";
  79. const route = useRoute();
  80. const router = useRouter();
  81. const { locale } = useI18n();
  82. const lanChange = ref(locale);
  83. const tableData = ref([]);
  84. const pageNum = ref(1);
  85. const pageSize = ref(10);
  86. const total = ref(0);
  87. const getDate = (val) => {
  88. return dayjs(val).format("YYYY-MM-DD");
  89. };
  90. const getListPhone = (list) => {
  91. let phone = []
  92. list && list.forEach(ele => {
  93. phone.push(ele.phone)
  94. });
  95. return phone.join(',')
  96. }
  97. const handleSizeChange = (val) => {
  98. pageSize.value = val;
  99. getListData(pageNum.value, pageSize.value);
  100. };
  101. const handleCurrentChange = (val) => {
  102. pageNum.value = val;
  103. getListData(pageNum.value, pageSize.value);
  104. };
  105. const formInline = ref({
  106. phone: '',
  107. mouldSmIdLike: ''
  108. })
  109. const getListData = async (PageNum, PageSize) => {
  110. try {
  111. let data = {
  112. PageNum: PageNum || 1,
  113. PageSize: PageSize || 10,
  114. phone: formInline.value.phone,
  115. mouldSmIdLike: formInline.value.mouldSmIdLike
  116. }
  117. const res = await userMouldListApi(data);
  118. console.log(res, "res");
  119. tableData.value = res.data.list;
  120. total.value = res.data.total * 1;
  121. } catch (error) {
  122. console.log(error, "err");
  123. }
  124. };
  125. onMounted(() => {
  126. getListData(1, 10);
  127. });
  128. </script>
  129. <style lang="scss" scoped>
  130. .page {
  131. height: calc(100vh - 80px);
  132. // height: calc(100vh - 80px);
  133. background-color: #ffffff;
  134. border-radius: 30px 0 0 0;
  135. overflow: hidden;
  136. padding: 10vh;
  137. .addbtn {
  138. margin-bottom: 2vh;
  139. }
  140. .formData {
  141. padding: 5vh 3vh;
  142. }
  143. .pagination {
  144. position: fixed;
  145. left: 55%;
  146. bottom: 8vh;
  147. transform: translateX(-50%);
  148. border-radius: 5px;
  149. padding: 10px 20px;
  150. z-index: 99;
  151. transition: all 0.3s;
  152. cursor: pointer;
  153. &:hover {
  154. background-color: #b8b8b873;
  155. }
  156. }
  157. }
  158. </style>