邃芒慧影管理端
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.
 
 
 
 

148 řádky
3.3 KiB

  1. <template>
  2. <div class="page justify-around">
  3. <el-table
  4. :data="tableData"
  5. style="width: 100%; height: 90%"
  6. size="large"
  7. align="center"
  8. border
  9. >
  10. <el-table-column
  11. prop="serviceId"
  12. label="接入方编码"
  13. align="center">
  14. <template #default="scope">
  15. <el-button type="primary" text @click="getDetail(scope.row.serviceId)">{{ scope.row.serviceId }}</el-button>
  16. </template>
  17. </el-table-column>
  18. <el-table-column
  19. prop="videoTime"
  20. label="视频时长"
  21. align="center"
  22. />
  23. <el-table-column
  24. prop="videoUrl"
  25. label="视频链接"
  26. align="center"
  27. />
  28. <el-table-column
  29. prop="createTime"
  30. label="创建时间"
  31. align="center"
  32. >
  33. <template #default="scope">
  34. {{ getDate(scope.row.createTime) }}
  35. </template>
  36. </el-table-column>
  37. </el-table>
  38. <div class="pagination">
  39. <el-pagination
  40. v-model:current-page="pageNum"
  41. v-model:page-size="pageSize"
  42. :page-sizes="[10, 50, 100]"
  43. :small="false"
  44. :disabled="false"
  45. :background="true"
  46. layout="total, sizes, prev, pager, next, jumper"
  47. :total="total"
  48. @size-change="handleSizeChange"
  49. @current-change="handleCurrentChange"
  50. />
  51. </div>
  52. </div>
  53. </template>
  54. <!-- videoType==1为竖,==2为横 -->
  55. <script setup>
  56. //#region 导入
  57. import { videoListApi } from '@/apis/home.js'
  58. import { useI18n } from "vue-i18n";
  59. import dayjs from "dayjs";
  60. import { useRoute, useRouter } from "vue-router";
  61. const route = useRoute();
  62. const router = useRouter();
  63. const tableData = ref([]);
  64. const pageNum = ref(1);
  65. const pageSize = ref(10);
  66. const total = ref(0);
  67. const getDate = (val) => {
  68. return dayjs(Number(val)).format("YYYY-MM-DD");
  69. };
  70. const handleSizeChange = (val) => {
  71. pageSize.value = val;
  72. getBusinessListFunc(pageNum.value, pageSize.value);
  73. };
  74. const handleCurrentChange = (val) => {
  75. pageNum.value = val;
  76. getBusinessListFunc(pageNum.value, pageSize.value);
  77. };
  78. const getBusinessListFunc = async (PageNum, PageSize) => {
  79. try {
  80. const res = await videoListApi(PageNum, PageSize);
  81. console.log(res, "res");
  82. tableData.value = res.data.list;
  83. total.value = res.data.total * 1;
  84. } catch (error) {
  85. console.log(error, "err");
  86. }
  87. };
  88. //查看详情
  89. function getDetail(id) {
  90. router.push({
  91. path: "/apiManage",
  92. query: {
  93. id,
  94. },
  95. });
  96. }
  97. onMounted(() => {
  98. getBusinessListFunc(1, 10);
  99. });
  100. </script>
  101. <style lang="scss" scoped>
  102. .page {
  103. height: calc(100vh - 80px);
  104. // height: calc(100vh - 80px);
  105. background-color: #ffffff;
  106. border-radius: 30px 0 0 0;
  107. overflow: hidden;
  108. padding: 10vh;
  109. .addbtn {
  110. margin-bottom: 2vh;
  111. }
  112. .formData {
  113. padding: 5vh 3vh;
  114. }
  115. .pagination {
  116. position: fixed;
  117. left: 55%;
  118. bottom: 8vh;
  119. transform: translateX(-50%);
  120. border-radius: 5px;
  121. padding: 10px 20px;
  122. z-index: 99;
  123. transition: all 0.3s;
  124. cursor: pointer;
  125. &:hover {
  126. background-color: #b8b8b873;
  127. }
  128. }
  129. }
  130. </style>