完成数据建模-数据记录

src/api/datahub/index.ts

@@ -26,7 +26,7 @@ export default {
       delete: (ids: number) => del('/source/template/del', { ids }),
       edit: (data: object) => put('/source/template/edit', data),
       detail: (id: number) => get('/source/template/detail', { id }),
-      getdata: (id: number) => get('/source/template/getdata', { id }),
+      getdata: (params: object) => get('/source/template/getdata',  params ),
    } ,
 
    tnode:{

src/views/datahub/modeling/component/detail.vue

@@ -1,70 +1,101 @@
 <template>
 	<div class="system-edit-dic-container">
 		<el-dialog title="数据记录" v-model="isShowDialog" width="75%">
-
-
-			<el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="110px">
-
-
-
-
-       <el-form-item :label="item+'：'"  v-for="(item,index) in jData" >
-          {{jsonsData[index]}}
-        </el-form-item>
-
-
-        
-			</el-form>
-
+			<el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
+				<el-table-column v-for="(item, index) in jData" :key="item" :label="item" :prop="item" show-overflow-tooltip align="center">
+				</el-table-column>
+			</el-table>
+			<pagination
+				v-show="tableData.total > 0"
+				:total="tableData.total"
+				v-model:page="tableData.param.pageNum"
+				v-model:limit="tableData.param.pageSize"
+				@pagination="typeList"
+			/>
 		</el-dialog>
 	</div>
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, defineComponent,ref, unref } from 'vue';
+import { reactive, toRefs, defineComponent, ref, unref } from 'vue';
 import api from '/@/api/datahub';
-import {ElMessage} from "element-plus";
+import { ElMessage } from 'element-plus';
 
 interface DicState {
 	isShowDialog: boolean;
 }
 
+// 定义接口来定义对象的类型
+interface TableDataRow {
+	id: number;
+	name: string;
+	key: string;
+
+	createBy: string;
+}
+interface TableDataState {
+	ids: number[];
+	tableData: {
+		data: Array<TableDataRow>;
+		total: number;
+		loading: boolean;
+		param: {
+			pageNum: number;
+			pageSize: number;
+			id: number;
+		};
+	};
+}
+
 export default defineComponent({
 	name: 'deviceEditPro',
-	setup(prop,{emit}) {
-    const formRef = ref<HTMLElement | null>(null);
+	setup(prop, { emit }) {
+		const formRef = ref<HTMLElement | null>(null);
 		const state = reactive<DicState>({
 			isShowDialog: false,
-      jsonsData:[],
-      jData:[]
-	
- 
+			jsonsData: [],
+			jData: [],
+			tableData: {
+				data: [],
+				total: 0,
+				loading: false,
+				param: {
+					pageNum: 1,
+					pageSize: 10,
+					id: 0,
+				},
+			},
 		});
 		// 打开弹窗
-		const openDialog = (row: RuleFormState|null) => {
-      resetForm();
-      if (row){
-        api.template.getdata(row.id).then((res:any)=>{
-
-          const jsonData=JSON.parse(res.data);
-        
-          state.jData=Object.keys(jsonData);
-          console.log(state.jData);
-          state.jData.forEach((item, index) => {
-						state.jsonsData[index] = jsonData[item];
-					});
+		const openDialog = (row: RuleFormState | null) => {
+			resetForm();
+			if (row) {
+				state.tableData.param.id = row.id;
+				typeList();
 
-          console.log(state.jsonsData);
-          //state.ruleForm = res.data.dictType
-        })
-        state.ruleForm = row;
-      }
+			}
 			state.isShowDialog = true;
 		};
-    const resetForm = ()=>{
-      state.jsonsData=[];
-      state.jData=[];
-    };
+
+		const typeList = () => {
+			console.log(state.tableData.param);
+			api.template.getdata(state.tableData.param).then((res: any) => {
+				const jsonData = JSON.parse(res.data);
+				state.tableData.data = jsonData;
+				state.jData = Object.keys(jsonData[0]);
+				console.log(jsonData);
+				state.jData.forEach((item, index) => {
+					state.jsonsData[index] = jsonData[item];
+				});
+
+				state.tableData.total = res.Total;
+				//state.ruleForm = res.data.dictType
+			});
+		};
+		const resetForm = () => {
+			state.jsonsData = [];
+			state.jData = [];
+		};
 		// 关闭弹窗
 		const closeDialog = () => {
 			state.isShowDialog = false;
@@ -74,12 +105,12 @@ export default defineComponent({
 			closeDialog();
 		};
 
-
 		return {
+			typeList,
 			openDialog,
 			closeDialog,
 			onCancel,
-      formRef,
+			formRef,
 			...toRefs(state),
 		};
 	},

src/views/datahub/modeling/component/editNode.vue

@@ -70,7 +70,7 @@
 		</el-dialog>
 	</div>
 </template>
-
+wa1
 <script lang="ts">
 import { reactive, toRefs, defineComponent, ref, unref } from 'vue';
 import api from '/@/api/datahub';