ETL记录

package.json

@@ -13,6 +13,7 @@
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "element-plus": "^1.0.2-beta.48",
+    "moment": "^2.29.1",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0",
     "vuex": "^4.0.0-0"

src/assets/css/base.css

@@ -54,6 +54,11 @@ body {
 .el-table:before {
 	height: 0;
 }
+/* 时间框下的按钮 */
+.el-picker-panel__footer .el-button--text {
+	border: none;
+	color: #215C85;
+}
 /* 分页样式 */
 .pagination-container {
 	position: relative;
@@ -241,6 +246,7 @@ body {
 	font-family: PingFangSC-Medium, PingFang SC;
 	font-size: 14px;
 	color: #3D3D42;
+	min-width: 70px;
 }
 .el-input-group__append, .el-input-group__prepend {
 	padding: 0;

src/components/Header.vue

@@ -3,18 +3,18 @@
     <img :src="logo" />
     <p>{{ title }}</p>
     <el-avatar shape="square" :size="32" fit="contain" :src="userLogo" />
-    <el-badge is-dot class="item">
+    <!-- <el-badge is-dot class="item">
       <el-button
         class="share-button"
         icon="el-icon-message-solid"
         type="primary"
       ></el-button>
-    </el-badge>
-    <el-button
+    </el-badge> -->
+    <!-- <el-button
       class="question-button"
       icon="el-icon-question"
       type="primary"
-    ></el-button>
+    ></el-button> -->
   </div>
 </template>
 

src/mixins/ListMixin.js

@@ -20,12 +20,17 @@ export const ListMixin = {
 		// 查询分页列表
 		getList () {
 			this.loading = true
-			get(this.url.queryListUrl, this.pagination).then((res) => {
+			get(this.url.queryListUrl, this.pagination)
+			.then((res) => {
 				if (res.code === 200) {
 					this.dataList = res.data.records || []
 					this.pagination.total = res.data.count
 					this.loading = false
+				} else {
+					this.loading = false
 				}
+			}).catch (() => {
+				this.loading = false
 			})
 		},
 		// 监听回调

src/router/routers.js

@@ -8,10 +8,10 @@ const routes = [
 	},
   {
 		icon: "el-icon-document",
-    path: "/ablout",
-    name: "ablout",
+		path: "/record",
+		name: "record",
     title: "ETL记录",
-    component: () => import("../views/About.vue"),
+    component: () => import("../views/record"),
   },
   {
 		icon: "el-icon-coin",
@@ -27,13 +27,6 @@ const routes = [
     title: "标准定义",
     component: () => import("../views/standard"),
   },
-	{
-		icon: "el-icon-tickets",
-		path: "/abloutc",
-		name: "abloutc",
-		title: "日志列表",
-		component: () => import("../views/About.vue"),
-	},
 	{
 		icon: "el-icon-c-scale-to-original",
 		path: "/field",

src/views/record/index.vue

@@ -0,0 +1,139 @@
+<template>
+	<div class="home">
+		<!-- 搜索条件容器 -->
+		<SearchTemplate>
+			<el-form ref="queryForm" :model="pagination" :inline="true" class="search-content">
+				<el-form-item :label="getColumnName('Record-Stage')">
+					<el-select v-model="pagination['Record-Stage']" placeholder="请选择" style="width: 240px">
+						<el-option
+							v-for="item in recordArray"
+							:key="item.value"
+							:label="item.label"
+							:value="item.value"
+						/>
+					</el-select>
+				</el-form-item>
+				<el-form-item :label="getColumnName('Record-Status')" style="margin-left: 32px;">
+					<el-select v-model="pagination['Record-Status']" placeholder="请选择" style="width: 240px">
+						<el-option
+							v-for="item in recordArray"
+							:key="item.value"
+							:label="item.label"
+							:value="item.value"
+						/>
+					</el-select>
+				</el-form-item>
+				<el-form-item :label="getColumnName('Record-TaskId')" style="margin-left: 32px;">
+					<el-input v-model.trim="pagination.taskid" placeholder="请输入查询内容" clearable
+						prefix-icon="el-icon-search" size="medium" style="width: 240px" />
+				</el-form-item>
+				<el-form-item :label="getColumnName('Record-BatchId')" style="margin-left: 32px;">
+					<el-input v-model.trim="pagination.batchid" placeholder="请输入查询内容" clearable
+						prefix-icon="el-icon-search" size="medium" style="width: 240px" />
+				</el-form-item>
+				<el-form-item label="开始时间" style="margin-top: 22px;">
+					<el-date-picker
+						v-model="pagination.start"
+						type="datetime"
+						placeholder="选择日期时间"
+						style="width: 240px;"
+					/>
+				</el-form-item>
+				<el-form-item label="结束时间" style="margin-top: 22px;margin-left: 32px;">
+					<el-date-picker
+						v-model="pagination.end"
+						type="datetime"
+						placeholder="选择日期时间"
+						style="width: 240px;"
+					/>
+				</el-form-item>
+				<el-form-item style="margin-top: 22px; margin-left: 32px;">
+					<el-button icon="el-icon-search" size="mini" class="search-button-style" @click="handleQuery">搜索</el-button>
+					<el-button icon="el-icon-refresh" size="mini" class="reset-button-style" @click="resetQuery">重置</el-button>
+				</el-form-item>
+			</el-form>
+		</SearchTemplate>
+		<!-- 页面主题容器 -->
+		<ContentContainer>
+			<el-table :data="dataList" v-loading="loading" size="small" style="width: 100%" border>
+				<el-table-column v-for="(item, index) in headers" :key="index" :label="getColumnName(item)" :show-overflow-tooltip="true" width="170">
+					<template #default="scope">
+						<span v-if="item === 'DB-LastModify' || item === 'DB-CreateTime'">{{ parseTime(scope.row[item]) }}</span>
+						<span v-else>{{ scope.row[item] }}</span>
+					</template>
+				</el-table-column>
+			</el-table>
+			<!-- 分页 -->
+			<Pagination v-show="pagination.total>0" v-model:pagination="pagination" @change="getList" />
+		</ContentContainer>
+	</div>
+</template>
+
+<script>
+	import SearchTemplate from "../../components/SearchTemplate.vue"
+	import ContentContainer from "../../components/ContentContainer.vue"
+	import { ListMixin } from '@/mixins/ListMixin'
+	import moment from 'moment'
+	export default {
+		name: "record",
+		components: {
+			SearchTemplate,
+			ContentContainer
+		},
+		mixins: [ListMixin], // mixins 里面封装了操作列表的共用方法，直接引入mixins即可
+		data() {
+			return {
+				recordArray: [],
+				headers: [
+					'Record-TaskId',
+					'Record-Message',
+					'Record-Stage',
+					'Record-Data',
+					'Record-TimeStamp',
+					'Record-SourceDB',
+					'Record-SourceTable',
+					'Record-TargetDB',
+					'Record-TargetTable',
+					'Record-Times',
+					'Record-Status',
+					'Record-BatchId',
+					'Record-DataId',
+				], // 遍历表头
+				url: {
+					queryListUrl: "/admin/etl/record/insertconfig"  // 查询分页列表接口
+				},
+			}
+		},
+		methods: {
+			// 搜索按钮操作
+			handleQuery() {
+				if (!this.pagination.stage) this.pagination.stage = undefined
+				if (!this.pagination.status) this.pagination.status = undefined
+				if (!this.pagination.taskid) this.pagination.taskid = undefined
+				if (!this.pagination.batchid) this.pagination.batchid = undefined
+				if (!this.pagination.start) {
+					this.pagination.start = undefined
+				} else {
+					this.pagination.start = moment(this.pagination.start).format('YYYYMMDDHHmmss')
+				}
+				if (!this.pagination.end) {
+					this.pagination.end = undefined
+				} else {
+					this.pagination.end = moment(this.pagination.end).format('YYYYMMDDHHmmss')
+				}
+				this.pagination.pageNumber = 1
+				this.getList()
+			},
+			// 重置按钮操作
+			resetQuery() {
+				this.pagination.stage = undefined
+				this.pagination.status = undefined
+				this.pagination.taskid = undefined
+				this.pagination.batchid = undefined
+				this.pagination.start = undefined
+				this.pagination.end = undefined
+				this.getList()
+			},
+		},
+	}
+</script>