数据库，标准定义

src/router/routers.js

@@ -15,17 +15,17 @@ const routes = [
   },
   {
 		icon: "el-icon-coin",
-    path: "/ablouta",
-    name: "ablouta",
+		path: "/etlDB",
+		name: "etlDB",
 		title: "ETL数据库",
-    component: () => import("../views/About.vue"),
+    component: () => import("../views/etlDB"),
   },
   {
 		icon: "el-icon-price-tag",
-    path: "/abloutb",
-    name: "abloutb",
-    title: "标准类型定义",
-    component: () => import("../views/About.vue"),
+		path: "/standard",
+		name: "standard",
+    title: "标准定义",
+    component: () => import("../views/standard"),
   },
 	{
 		icon: "el-icon-tickets",

src/views/etl/components/edit.vue

@@ -4,7 +4,7 @@
 			<el-row>
 				<el-col :span="8">
           <el-form-item :label="getColumnName('TaskHead-SourceDB')" prop="TaskHead-SourceDB">
-            <el-select v-model.number="form['TaskHead-SourceDB']" placeholder="请选择">
+            <el-select v-model="form['TaskHead-SourceDB']" placeholder="请选择">
               <el-option
                 v-for="item in dataBaseArray"
                 :key="item['DB-ID']"
@@ -16,7 +16,7 @@
         </el-col>
 				<el-col :span="8">
           <el-form-item :label="getColumnName('TaskHead-TargetDB')" prop="TaskHead-TargetDB">
-            <el-select v-model.number="form['TaskHead-TargetDB']" placeholder="请选择">
+            <el-select v-model="form['TaskHead-TargetDB']" placeholder="请选择">
               <el-option
                 v-for="item in dataBaseArray"
                 :key="item['DB-ID']"

src/views/etlDB/components/edit.vue

@@ -0,0 +1,143 @@
+<template>
+	<el-dialog :title="title" model-value width="800px" :close-on-click-modal="false" :before-close="cancel">
+		<el-form ref="form" :model="form" :rules="rules" label-width="120px">
+			<el-row>
+				<el-col :span="12">
+          <el-form-item :label="getColumnName('DB-EngineName')" prop="DB-EngineName">
+            <el-input v-model="form['DB-EngineName']" />
+          </el-form-item>
+        </el-col>
+				<el-col :span="12">
+          <el-form-item :label="getColumnName('DB-Host')" prop="DB-Host">
+            <el-input v-model="form['DB-Host']" />
+          </el-form-item>
+        </el-col>
+				<el-col :span="12">
+          <el-form-item :label="getColumnName('DB-Port')" prop="DB-Port">
+            <el-input v-model="form['DB-Port']" />
+          </el-form-item>
+        </el-col>
+				<el-col :span="12">
+          <el-form-item :label="getColumnName('DB-User')" prop="DB-User">
+            <el-input v-model="form['DB-User']" />
+          </el-form-item>
+        </el-col>
+				<el-col :span="12">
+          <el-form-item :label="getColumnName('DB-Password')" prop="DB-Password">
+            <el-input type="password" v-model="form['DB-Password']" />
+          </el-form-item>
+        </el-col>
+				<el-col :span="12">
+          <el-form-item :label="getColumnName('DB-DatabaseName')" prop="DB-DatabaseName">
+            <el-input v-model="form['DB-DatabaseName']" />
+          </el-form-item>
+        </el-col>
+				<el-col :span="12">
+          <el-form-item :label="getColumnName('DB-DBType')" prop="DB-DBType">
+						<el-select v-model="form['DB-DBType']" placeholder="请选择">
+              <el-option
+                v-for="item in dBTypeArray"
+                :key="item['Stdef-StdefTyp']"
+								:label="item['Stdef-Bez']"
+								:value="item['Stdef-StdefTyp']"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+			</el-row>
+		</el-form>
+		<template #footer>
+			<span class="dialog-footer">
+				<el-button type="primary" class="dialog-submit-button" @click="submitForm">确 定</el-button>
+				<el-button class="dialog-cancel-button" @click="cancel">取 消</el-button>
+			</span>
+		</template>
+	</el-dialog>
+</template>
+<script>
+import { get, post, put } from "../../../server/api.js";
+export default {
+	name: 'editField',
+	props: {
+		item: {
+			default: null,
+		}
+	},
+	mounted() {
+		if (this.item) {
+			this.handleUpdate(this.item)
+		} else {
+			this.handleAdd()
+		}
+	},
+	data() {
+		return {
+			dBTypeArray: [],
+			title: '添加', // 弹框标题
+			form: {}, // 表单参数
+			rules: { // 表单校验
+				'DB-EngineName': [
+					{ required: true, message: '此项不能为空', trigger: 'blur' }
+				],
+				'DB-Host': [
+					{ required: true, message: '此项不能为空', trigger: 'blur' }
+				],
+				'DB-Port': [
+					{ required: true, message: '此项不能为空', trigger: 'blur' }
+				],
+				'DB-DBType': [
+					{ required: true, message: '此项不能为空', trigger: 'blur' }
+				],
+			},
+			url: {
+				updateUrl: "/admin/etl/database/updateone", // 修改
+				addUrl: "/admin/etl/database/insertone", // 新增
+			},
+		}
+	},
+	created() {
+		this.getStanderOne({ 'StatId': 'DB-DBType' }).then(res => {
+			this.dBTypeArray = res.data || []
+		})
+	},
+	methods: {
+		cancel() { // 取消按钮
+			this.$emit('update:isShowDialog','')
+		},
+		handleAdd() { // 新增按钮操作
+			this.title = '添加'
+		},
+		handleUpdate(row) { // 修改按钮操作
+			get(`/admin/etl/database/get/${row['DB-ID']}`).then(res => {
+				this.form = res.data
+				this.title = '修改'
+			})
+		},
+		submitForm() { // 提交按钮
+			this.$refs['form'].validate(valid => {
+				if (valid) {
+					if (this.item) {
+						put(this.url.updateUrl, this.form).then(res => {
+							if (res.code === 200) {
+								this.msgSuccess('修改成功')
+								this.$emit('editCallBack')
+							} else {
+								this.msgError(res.msg)
+							}
+						})
+					} else {
+						post(this.url.addUrl, this.form).then(res => {
+							if (res.code === 200) {
+								this.msgSuccess('新增成功')
+								this.$emit('editCallBack')
+							} else {
+								this.msgError(res.msg)
+							}
+						})
+					}
+				}
+			})
+		},
+	}
+}
+</script>

src/views/etlDB/index.vue

@@ -0,0 +1,100 @@
+<template>
+	<div class="home">
+		<!-- 搜索条件容器 -->
+		<SearchTemplate>
+			<el-form ref="queryForm" :model="pagination" :inline="true" class="clearfix search-content">
+				<el-form-item :label="getColumnName('DB-EngineName')">
+					<el-input v-model.trim="pagination.enginename" placeholder="请输入查询内容" clearable
+						prefix-icon="el-icon-search" size="medium" style="width: 240px" />
+				</el-form-item>
+				<el-form-item>
+					<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-item class="fr">
+					<el-button icon="el-icon-plus" class="add-button-style" @click="handleAdd">新增</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-column label="操作" width="200" fixed="right">
+					<template #default="scope">
+						<el-button class="edit-button-style" @click="handleUpdate(scope.row)" icon="el-icon-edit" size="small">修改</el-button>
+						<el-button class="edit-button-style" @click="handleDelete(scope.row)" icon="el-icon-delete" size="small">删除</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+			<!-- 分页 -->
+			<Pagination v-show="pagination.total>0" v-model:pagination="pagination" @change="getList" />
+			<!-- 新增/修改子组件 -->
+			<EditTemplate v-if="isShowDialog === 'edit' ? true : false" :item="item" v-model:isShowDialog="isShowDialog" @editCallBack="completeCallBack"></EditTemplate>
+		</ContentContainer>
+	</div>
+</template>
+
+<script>
+	import SearchTemplate from "../../components/SearchTemplate.vue"
+	import ContentContainer from "../../components/ContentContainer.vue"
+	import EditTemplate from "./components/edit.vue"
+	import { ListMixin } from '@/mixins/ListMixin'
+	export default {
+		name: "field",
+		components: {
+			SearchTemplate,
+			ContentContainer,
+			EditTemplate
+		},
+		mixins: [ListMixin], // mixins 里面封装了操作列表的共用方法，直接引入mixins即可
+		data() {
+			return {
+				item:{}, // 当前要操作的
+				headers: [
+					'DB-ID',
+					'DB-EngineName',
+					'DB-Host',
+					'DB-Port',
+					'DB-User',
+					'DB-Password',
+					'DB-DatabaseName',
+					'DB-DBType',
+					'DB-LastModify',
+					'DB-CreateTime',
+				], // 遍历表头
+				url: {
+					queryListUrl: "/admin/etl/database/query"  // 查询分页列表接口
+				},
+			}
+		},
+		methods: {
+			// 搜索按钮操作
+			handleQuery() {
+				if (this.pagination.enginename === '') this.pagination.enginename = undefined
+				this.pagination.pageNumber = 1
+				this.getList()
+			},
+			// 重置按钮操作
+			resetQuery() {
+				this.pagination.enginename = undefined
+				this.handleQuery()
+			},
+			// 删除按钮操作
+			handleDelete(row) {
+				let keyName = row['DB-ID']
+				let deteleUrl = `/admin/etl/database/deleteone/${row['DB-ID']}`
+				/* 
+				* 第一个参数  删除数据的标志
+				* 第二个参数  删除的接口拼接参数
+				*/ 
+				this.delHanle(keyName, deteleUrl)
+			}
+		},
+	}
+</script>

src/views/standard/components/edit.vue

@@ -0,0 +1,137 @@
+<template>
+	<el-dialog :title="title" model-value width="800px" :close-on-click-modal="false" :before-close="cancel">
+		<el-form ref="form" :model="form" :rules="rules" label-width="120px">
+			<el-row>
+				<el-col :span="12">
+          <el-form-item :label="getColumnName('Stdef-StdefTyp')" prop="Stdef-StdefTyp">
+            <el-input :disabled="item" v-model="form['Stdef-StdefTyp']" />
+          </el-form-item>
+        </el-col>
+				<el-col :span="12">
+          <el-form-item :label="getColumnName('Stdef-StatId')" prop="Stdef-StatId">
+            <el-input :disabled="item" v-model="form['Stdef-StatId']" />
+          </el-form-item>
+        </el-col>
+				<el-col :span="12">
+          <el-form-item :label="getColumnName('Stdef-Lang')" prop="Stdef-Lang">
+            <el-input :disabled="item" v-model="form['Stdef-Lang']" />
+          </el-form-item>
+        </el-col>
+				<el-col :span="12">
+          <el-form-item :label="getColumnName('Stdef-FieldType')" prop="Stdef-FieldType">
+						<el-select v-model="form['Stdef-FieldType']" :disabled="item" placeholder="请选择">
+              <el-option
+                v-for="item in fieldTypeArray"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+				<el-col :span="12">
+          <el-form-item :label="getColumnName('Stdef-Bez')" prop="Stdef-Bez">
+            <el-input v-model="form['Stdef-Bez']" />
+          </el-form-item>
+        </el-col>
+			</el-row>
+		</el-form>
+		<template #footer>
+			<span class="dialog-footer">
+				<el-button type="primary" class="dialog-submit-button" @click="submitForm">确 定</el-button>
+				<el-button class="dialog-cancel-button" @click="cancel">取 消</el-button>
+			</span>
+		</template>
+	</el-dialog>
+</template>
+<script>
+import { get, post, put } from "../../../server/api.js";
+export default {
+	name: 'editField',
+	props: {
+		item: {
+			default: null,
+		}
+	},
+	mounted() {
+		if (this.item) {
+			this.handleUpdate(this.item)
+		} else {
+			this.handleAdd()
+		}
+	},
+	data() {
+		return {
+			fieldTypeArray: [{
+				label: 'int',
+				value: 'int'
+			},{
+				label: 'string',
+				value: 'string'
+			}],
+			title: '添加', // 弹框标题
+			form: {}, // 表单参数
+			rules: { // 表单校验
+				'Stdef-StdefTyp': [
+					{ required: true, message: '此项不能为空', trigger: 'blur' }
+				],
+				'Stdef-StatId': [
+					{ required: true, message: '此项不能为空', trigger: 'blur' }
+				],
+				'Stdef-Lang': [
+					{ required: true, message: '此项不能为空', trigger: 'blur' }
+				],
+				'Stdef-Bez': [
+					{ required: true, message: '此项不能为空', trigger: 'blur' }
+				],
+				'Stdef-FieldType': [
+					{ required: true, message: '此项不能为空', trigger: 'blur' }
+				],
+			},
+			url: {
+				updateUrl: "/admin/etl/stdef/updateone", // 修改
+				addUrl: "/admin/etl/stdef/insertone", // 新增
+			},
+		}
+	},
+	methods: {
+		cancel() { // 取消按钮
+			this.$emit('update:isShowDialog','')
+		},
+		handleAdd() { // 新增按钮操作
+			this.title = '添加'
+		},
+		handleUpdate(row) { // 修改按钮操作
+			get(`/admin/etl/stdef/get/${row['Stdef-StdefTyp']}/${row['Stdef-StatId']}/${row['Stdef-Lang']}`).then(res => {
+				this.form = res.data
+				this.title = '修改'
+			})
+		},
+		submitForm() { // 提交按钮
+			this.$refs['form'].validate(valid => {
+				if (valid) {
+					if (this.item) {
+						put(this.url.updateUrl, this.form).then(res => {
+							if (res.code === 200) {
+								this.msgSuccess('修改成功')
+								this.$emit('editCallBack')
+							} else {
+								this.msgError(res.msg)
+							}
+						})
+					} else {
+						post(this.url.addUrl, this.form).then(res => {
+							if (res.code === 200) {
+								this.msgSuccess('新增成功')
+								this.$emit('editCallBack')
+							} else {
+								this.msgError(res.msg)
+							}
+						})
+					}
+				}
+			})
+		},
+	}
+}
+</script>

src/views/standard/index.vue

@@ -0,0 +1,97 @@
+<template>
+	<div class="home">
+		<!-- 搜索条件容器 -->
+		<SearchTemplate>
+			<el-form ref="queryForm" :model="pagination" :inline="true" class="clearfix search-content">
+				<el-form-item :label="getColumnName('Stdef-StatId')">
+					<el-input v-model.trim="pagination.statid" placeholder="请输入查询内容" clearable
+						prefix-icon="el-icon-search" size="medium" style="width: 240px" />
+				</el-form-item>
+				<el-form-item>
+					<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-item class="fr">
+					<el-button icon="el-icon-plus" class="add-button-style" @click="handleAdd">新增</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">
+					<template #default="scope">
+						<span v-if="item === 'Stdef-LastModify' || item === 'Stdef-CreateTime'">{{ parseTime(scope.row[item]) }}</span>
+						<span v-else>{{ scope.row[item] }}</span>
+					</template>
+				</el-table-column>
+				<el-table-column label="操作" width="200">
+					<template #default="scope">
+						<el-button class="edit-button-style" @click="handleUpdate(scope.row)" icon="el-icon-edit" size="small">修改</el-button>
+						<el-button class="edit-button-style" @click="handleDelete(scope.row)" icon="el-icon-delete" size="small">删除</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+			<!-- 分页 -->
+			<Pagination v-show="pagination.total>0" v-model:pagination="pagination" @change="getList" />
+			<!-- 新增/修改子组件 -->
+			<EditTemplate v-if="isShowDialog === 'edit' ? true : false" :item="item" v-model:isShowDialog="isShowDialog" @editCallBack="completeCallBack"></EditTemplate>
+		</ContentContainer>
+	</div>
+</template>
+
+<script>
+	import SearchTemplate from "../../components/SearchTemplate.vue"
+	import ContentContainer from "../../components/ContentContainer.vue"
+	import EditTemplate from "./components/edit.vue"
+	import { ListMixin } from '@/mixins/ListMixin'
+	export default {
+		name: "field",
+		components: {
+			SearchTemplate,
+			ContentContainer,
+			EditTemplate
+		},
+		mixins: [ListMixin], // mixins 里面封装了操作列表的共用方法，直接引入mixins即可
+		data() {
+			return {
+				item:{}, // 当前要操作的
+				headers: [
+					'Stdef-StdefTyp',
+					'Stdef-StatId',
+					'Stdef-Lang',
+					'Stdef-Bez',
+					'Stdef-FieldType',
+					'Stdef-LastModify',
+					'Stdef-CreateTime',
+				], // 遍历表头
+				url: {
+					queryListUrl: "/admin/etl/stdef/query"  // 查询分页列表接口
+				},
+			}
+		},
+		methods: {
+			// 搜索按钮操作
+			handleQuery() {
+				if (this.pagination.statid === '') this.pagination.statid = undefined
+				this.pagination.pageNumber = 1
+				this.getList()
+			},
+			// 重置按钮操作
+			resetQuery() {
+				this.pagination.statid = undefined
+				this.handleQuery()
+			},
+			// 删除按钮操作
+			handleDelete(row) {
+				let keyName = row['Stdef-StatId']
+				let deteleUrl = `/admin/etl/stdef/deleteone/${row['Stdef-StdefTyp']}/${row['Stdef-StatId']}/${row['Stdef-Lang']}`
+				/* 
+				* 第一个参数  删除数据的标志
+				* 第二个参数  删除的接口拼接参数
+				*/ 
+				this.delHanle(keyName, deteleUrl)
+			}
+		},
+	}
+</script>