Просмотр исходного кода

仓库更新记录增加刷新按钮,优化时间显示

Signed-off-by: IMaster <logole@live.cn>
IMaster 2 лет назад
Родитель
Сommit
b3f3a6b6e3
1 измененных файлов с 18 добавлено и 7 удалено
  1. 18 7
      Web/src/views/home/widgets/components/commit.vue

+ 18 - 7
Web/src/views/home/widgets/components/commit.vue

@@ -1,12 +1,11 @@
 <template>
 	<el-card shadow="hover" header="更新记录">
 		<template #header>
-			<el-icon style="display: inline; vertical-align: middle"> <ele-Refresh /> </el-icon>
-			<span style=""> 更新记录 </span>
+			<el-button type="primary" icon="ele-Refresh" round @click="refresh">更新记录</el-button>
 		</template>
-		<div class="commit">
+		<div class="commit" v-loading="state.loading" >
 			<el-timeline style="max-width: 600px" v-if="state.list.length > 0">
-				<el-timeline-item v-for="(item, index) in state.list" :key="index" :timestamp="item.commit.committer.date.replace(/[T+]/g, ' ')">
+				<el-timeline-item v-for="(item, index) in state.list" :key="index" :timestamp="formatDate(new Date(item.commit.committer.date), 'YYYY-mm-dd HH:MM:SS')">
 					<el-link :href="item.html_url" target="_blank"> {{ item.commit.message }}</el-link>
 				</el-timeline-item>
 			</el-timeline>
@@ -24,14 +23,15 @@ export default {
 </script>
 
 <script setup lang="ts" name="commit">
-// import axios from 'axios';
 import { reactive, onMounted } from 'vue';
+import { formatDate } from '/@/utils/formatTime';
 
 const state = reactive({
+	loading: false,
 	list: [] as any,
 });
 
-onMounted(() => {
+const getList = () => {
 	axios({
 		method: 'get',
 		url: 'https://gitee.com/api/v5/repos/zuohuaijun/Admin.NET/commits',
@@ -41,7 +41,18 @@ onMounted(() => {
 		},
 	}).then((res: any) => {
 		state.list = res.data;
+		state.loading = false;
 	});
+};
+
+const refresh = () => {
+	state.loading = true;
+	getList();
+};
+
+onMounted(() => {
+	state.loading = true;
+	getList();
 });
 </script>
 
@@ -56,4 +67,4 @@ onMounted(() => {
 	font-size: 12px;
 	margin-top: 10px;
 }
-</style>
+</style>