新增数据建模模版

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

@@ -0,0 +1,367 @@
+<template>
+	<div class="system-edit-dic-container">
+		<el-dialog :title="(ruleForm.sourceId !== 0 ? '修改' : '添加') + '数据源'" v-model="isShowDialog" width="769px">
+			<el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="110px">
+				<el-form-item label="数据源标识" prop="key">
+					<el-input v-model="ruleForm.key" placeholder="请输入数据源名称" />
+				</el-form-item>
+				<el-form-item label="数据源名称" prop="name">
+					<el-input v-model="ruleForm.name" placeholder="请输入数据源名称" />
+				</el-form-item>
+
+				<el-form-item label="描述" prop="description">
+					<el-input v-model="ruleForm.description" type="textarea" placeholder="请输入内容"></el-input>
+				</el-form-item>
+
+				<el-form-item label="数据来源" prop="from">
+					<el-radio-group v-model="ruleForm.from">
+						<el-radio :label="1">api导入</el-radio>
+						<el-radio :label="2">数据库</el-radio>
+						<el-radio :label="3">文件</el-radio>
+					</el-radio-group>
+				</el-form-item>
+
+				<el-divider content-position="left">规则表达式</el-divider>
+
+				<div v-for="(item, index) in rule" :key="index">
+					<el-form-item label="表达式">
+						<el-input v-model="item.expression" placeholder="请输入规则表达式" />
+					</el-form-item>
+
+					<el-form-item label="参数" >
+						<el-input v-model="item.params.name" placeholder="请输入键值" class="w-35" />
+						<el-input v-model="item.params.value" placeholder="请输入值" class="w-35" />
+						<div class="conicon">
+							<el-icon @click="delRule(index)" v-if="index > 0"><Delete /></el-icon>
+						</div>
+					</el-form-item>
+				</div>
+				<div style="padding: 10px">
+					<el-button type="primary" class="addbutton" @click="addRule">增加</el-button>
+				</div>
+				<el-divider content-position="left">数据源配置</el-divider>
+
+				<el-form-item label="请求方法" >
+					<el-select v-model="config.method" placeholder="请选择请求方法">
+						<el-option v-for="item in methodData" :key="item.value" :label="item.label" :value="item.value" />
+					</el-select>
+				</el-form-item>
+
+				<el-form-item label="请求地址" >
+					<el-input v-model="config.url" placeholder="请输入请求地址" />
+				</el-form-item>
+
+				<el-form-item label="更新时间" >
+					<el-input v-model="config.interval" placeholder="请输入更新时间" class="w-35" />
+					<el-select v-model="config.intervalUnit" placeholder="请选择单位">
+						<el-option v-for="item in unitData" :key="item.value" :label="item.label" :value="item.value" />
+					</el-select>
+				</el-form-item>
+
+				<div class="box-content">
+					<el-divider content-position="left">请求参数</el-divider>
+					<div class="content-f" v-for="(item, index) in requestParams" :key="index">
+						<el-select v-model="item.type" placeholder="参数类型" style="width: 320px">
+							<el-option v-for="item in paramData" :key="item.value" :label="item.label" :value="item.value" />
+						</el-select>
+						<el-input v-model="item.name" placeholder="请输入参数标题" style="width: 320px" />
+						<el-input v-model="item.key" placeholder="请输入参数名" style="width: 320px" />
+						<el-input v-model="item.value" placeholder="请输入参数值" style="width: 320px" />
+						<div class="conicon">
+							<el-icon @click="delParams(index)" v-if="index > 0"><Delete /></el-icon>
+						</div>
+					</div>
+					<el-button type="primary" class="addbutton" @click="addParams">增加</el-button>
+				</div>
+			</el-form>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="onCancel" size="default">取 消</el-button>
+					<el-button type="primary" @click="onSubmit" size="default">{{ ruleForm.sourceId !== 0 ? '修 改' : '添 加' }}</el-button>
+				</span>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, defineComponent, ref, unref } from 'vue';
+import api from '/@/api/datahub';
+import { ElMessage } from 'element-plus';
+import { Delete, Minus, Right } from '@element-plus/icons-vue';
+
+interface RuleFormState {
+	sourceId: number;
+	name: string;
+	from: number;
+	key: string;
+	userName: string;
+	password: string;
+	description: string;
+	status: number;
+}
+interface DicState {
+	isShowDialog: boolean;
+	ruleForm: RuleFormState;
+	rules: {};
+}
+
+export default defineComponent({
+	name: 'Edit',
+	components: { Delete, Minus, Right },
+
+	setup(prop, { emit }) {
+		const formRef = ref<HTMLElement | null>(null);
+		const state = reactive<DicState>({
+			
+			isShowDialog: false,
+			config: {},
+			ruledata: [
+				{
+					expression: '',
+					params: {},
+				},
+			],
+			rule: [
+				{
+					expression: '',
+					params: {
+						name: '',
+						value: '',
+					},
+				},
+			],
+			requestParams: [
+				{
+					type: '',
+					key: '',
+					name: '',
+					value: '',
+				},
+			],
+			methodData: [
+				{
+					label: 'GET',
+					value: 'get',
+				},
+				{
+					label: 'POST',
+					value: 'post',
+				},
+				{
+					label: 'PUT',
+					value: 'put',
+				},
+			],
+
+			unitData: [
+				{
+					label: '秒',
+					value: 'second',
+				},
+				{
+					label: '分',
+					value: 'minute',
+				},
+				{
+					label: '时',
+					value: 'hour',
+				},
+				{
+					label: '天',
+					value: 'day',
+				},
+			],
+
+			paramData: [
+				{
+					lable: 'header',
+					value: 'header',
+				},
+				{
+					lable: 'body',
+					value: 'body',
+				},
+				{
+					lable: 'param',
+					value: 'param',
+				},
+			],
+
+			ruleForm: {
+				sourceId: 0,
+				name: '',
+				from: 1,
+				key: '',
+				rule: [],
+				config: {
+					method: '',
+					url: '',
+					interval: '',
+					intervalUnit: '',
+					requestParams: [],
+				},
+				description: '',
+			},
+			rules: {
+				key: [{ required: true, message: '数据源标识不能为空', trigger: 'blur' }],
+				name: [{ required: true, message: '数据源名称不能为空', trigger: 'blur' }],
+				from: [{ required: true, message: '数据源类型不能为空', trigger: 'blur' }],
+			
+			},
+		});
+		const delParams = (index) => {
+			state.requestParams.splice(index, 1);
+		};
+
+		const addParams = () => {
+			state.requestParams.push({
+				type: '',
+				key: '',
+				name: '',
+				value: '',
+			});
+		};
+
+		const delRule = (index) => {
+			state.rule.splice(index, 1);
+		};
+
+		const addRule = () => {
+			state.rule.push({
+				expression: '',
+				params: {
+					name: '',
+					value: '',
+				},
+			});
+		};
+		// 打开弹窗
+		const openDialog = (row: RuleFormState | null) => {
+			resetForm();
+
+			if (row) {
+				 api.common.detail(row.sourceId).then((res:any)=>{
+				    state.ruleForm = res.data
+					state.config=res.data.apiConfig
+					state.requestParams=res.data.apiConfig.requestParams
+
+           			res.data.sourceRule.forEach((item, index) => {
+						state.rule[index].expression = item.expression;
+						state.rule[index].params.name =Object.keys(item.params) ;
+						state.rule[index].params.value = item.params[Object.keys(item.params)];
+					});
+
+
+				 })
+			}
+			state.isShowDialog = true;
+		};
+		const resetForm = () => {
+			state.ruleForm = {
+						sourceId: 0,
+				name: '',
+				from: 1,
+				key: '',
+				rule: [],
+				config: {
+					method: '',
+					url: '',
+					interval: '',
+					intervalUnit: '',
+					requestParams: [],
+				},
+				description: '',
+			};
+		};
+		// 关闭弹窗
+		const closeDialog = () => {
+			state.isShowDialog = false;
+		};
+		// 取消
+		const onCancel = () => {
+			closeDialog();
+		};
+		// 新增
+		const onSubmit = () => {
+			const formWrap = unref(formRef) as any;
+			if (!formWrap) return;
+			formWrap.validate((valid: boolean) => {
+				if (valid) {
+					//修改rule数据
+					state.rule.forEach((item, index) => {
+						item.params[item.params.name] = item.params.value;
+						delete item.params.name;
+						delete item.params.value;
+					});
+
+					state.ruleForm.rule = state.rule;
+					state.config.requestParams = state.requestParams;
+					state.ruleForm.config = state.config;
+
+					if (state.ruleForm.sourceId !== 0) {
+						//修改
+						api.common.edit(state.ruleForm).then(() => {
+							ElMessage.success('数据源类型修改成功');
+							closeDialog(); // 关闭弹窗
+							emit('typeList');
+						});
+					} else {
+						//添加
+
+						api.common.add(state.ruleForm).then(() => {
+							ElMessage.success('数据源类型添加成功');
+							closeDialog(); // 关闭弹窗
+							emit('typeList');
+						});
+					}
+				}
+			});
+		};
+
+		return {
+			addRule,
+			delRule,
+			addParams,
+			delParams,
+			openDialog,
+			closeDialog,
+			onCancel,
+			onSubmit,
+			formRef,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+<style>
+.el-input__wrapper {
+	width: 98%;
+}
+
+.box-content {
+	border: 1px solid #e8e8e8;
+	margin: 10px;
+	padding: 10px;
+}
+
+.content-f {
+	display: flex;
+	margin-bottom: 10px;
+}
+.content-f .el-input__wrapper {
+	margin-right: 5px;
+}
+.addbutton {
+	width: 100%;
+	margin-top: 10px;
+}
+.conicon {
+	width: 55px;
+	height: 25px;
+
+	font-size: 28px;
+	line-height: 28px;
+	cursor: pointer;
+}
+</style>

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

@@ -0,0 +1,304 @@
+<template>
+	<div class="system-edit-dic-container">
+		<el-dialog :title="(ruleForm.nodeId !== 0 ? '修改' : '添加') + '数据节点'" v-model="isShowDialog" width="769px">
+			<el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="110px">
+				<el-form-item label="数据节点标识" prop="key">
+					<el-input v-model="ruleForm.key" placeholder="请输入数据节点名称" />
+				</el-form-item>
+				<el-form-item label="数据节点名称" prop="name">
+					<el-input v-model="ruleForm.name" placeholder="请输入数据节点名称" />
+				</el-form-item>
+
+
+					
+			<el-form-item label="数据类型" prop="dataType">
+					<el-select v-model="ruleForm.dataType" filterable placeholder="请选择数据类型" >
+						<el-option
+						v-for="item in tabData"
+						:key="item.value"
+						:label="item.label"
+						:value="item.value"
+						/>
+					</el-select>
+				</el-form-item>
+
+				<el-form-item label="取值项" prop="value">
+					<el-input v-model="ruleForm.value" placeholder="请输入取值项" />
+				</el-form-item>
+
+		
+
+				<el-divider content-position="left">规则表达式</el-divider>
+
+				<div v-for="(item, index) in rule" :key="index">
+					<el-form-item label="表达式" >
+						<el-input v-model="item.expression" placeholder="请输入规则表达式" />
+					</el-form-item>
+
+					<el-form-item label="参数" >
+						<el-input v-model="rule[index].params.name" placeholder="请输入键值" class="w-35" />
+						<el-input v-model="rule[index].params.value" placeholder="请输入值" class="w-35" />
+						<div class="conicon">
+							<el-icon @click="delRule(index)" v-if="index > 0"><Delete /></el-icon>
+						</div>
+					</el-form-item>
+				</div>
+				<div style="padding: 10px">
+					<el-button type="primary" class="addbutton" @click="addRule">增加</el-button>
+				</div>
+
+	
+
+			
+			
+
+			
+			</el-form>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="onCancel" size="default">取 消</el-button>
+					<el-button type="primary" @click="onSubmit" size="default">{{ ruleForm.nodeId !== 0 ? '修 改' : '添 加' }}</el-button>
+				</span>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, defineComponent, ref, unref } from 'vue';
+import api from '/@/api/datahub';
+import { ElMessage } from 'element-plus';
+import { Delete, Minus, Right } from '@element-plus/icons-vue';
+
+interface RuleFormState {
+	nodeId: number;
+	name: string;
+	from: number;
+	key: string;
+	dataType: string;
+	value: string;
+	description: string;
+	status: number;
+}
+interface DicState {
+	isShowDialog: boolean;
+	ruleForm: RuleFormState;
+	rules: {};
+}
+
+export default defineComponent({
+	name: 'Edit',
+	components: { Delete, Minus, Right },
+
+	setup(prop, { emit }) {
+		const editDicRef = ref();
+		const formRef = ref<HTMLElement | null>(null);
+		const state = reactive<DicState>({
+			
+			isShowDialog: false,
+			config: {},
+			tabData:[{
+				label: 'varchar',
+				value: 'varchar',
+			},{
+				label: 'string',
+				value: 'string',
+			},{
+				label: 'int',
+				value: 'int',
+			},{
+				label: 'bigint',
+				value: 'bigint',
+			},{
+				label: 'tinyint',
+				value: 'tinyint',
+			},{
+				label: 'float',
+				value: 'float',
+			},{
+				label: 'double',
+				value: 'double',
+			},{
+				label: 'text',
+				value: 'text',
+			},{
+				label: 'datetime',
+				value: 'datetime',
+			},{
+				label: 'timestamp',
+				value: 'timestamp',
+			}],
+			ruledata:  [
+				{
+					expression: '',
+					params: {
+						name: '',
+						value: '',
+					},
+				},
+			],
+			rule: [
+				{
+					expression: '',
+					params: {
+						name: '',
+						value: '',
+					},
+				},
+			],
+			
+		
+
+		
+			ruleForm: {
+				nodeId: 0,
+				name: '',
+				key: '',
+				dataType:'',
+				value:'',
+				rule: [],
+				
+				description: '',
+			},
+			rules: {
+				key: [{ required: true, message: '数据节点标识不能为空', trigger: 'blur' }],
+				name: [{ required: true, message: '数据节点名称不能为空', trigger: 'blur' }],
+				dataType: [{ required: true, message: '数据节点类型不能为空', trigger: 'blur' }],
+				value: [{ required: true, message: '数据节点取值项不能为空', trigger: 'blur' }],
+			
+			},
+		});
+		
+
+		const delRule = (index) => {
+			state.rule.splice(index, 1);
+		};
+
+		const addRule = () => {
+			state.rule.push({
+				expression: '',
+				params: {
+					name: '',
+					value: '',
+				},
+			});
+		};
+		// 打开弹窗
+		const openDialog = (row: RuleFormState | null) => {
+			resetForm();
+
+			if (row?.nodeId) {
+
+				  state.ruleForm = row
+
+				 var data=JSON.parse(row.rule)
+           			 console.log(data);
+
+					data.forEach((item, index) => {
+						state.rule[index].expression = item.expression;
+						state.rule[index].params.name =Object.keys(item.params) ;
+						state.rule[index].params.value = item.params[Object.keys(item.params)];
+					});
+			}
+
+			state.ruleForm = row;
+			state.isShowDialog = true;
+		};
+		const resetForm = () => {
+			state.ruleForm = {
+				nodeId: 0,
+				name: '',
+				from: 1,
+				key: '',
+				rule: [],
+				
+				description: '',
+			};
+		};
+		// 关闭弹窗
+		const closeDialog = () => {
+			state.isShowDialog = false;
+		};
+		// 取消
+		const onCancel = () => {
+			closeDialog();
+		};
+		// 新增
+		const onSubmit = () => {
+			const formWrap = unref(formRef) as any;
+			if (!formWrap) return;
+			formWrap.validate((valid: boolean) => {
+			if (valid) {
+					//修改rule数据
+					state.rule.forEach((item, index) => {
+						item.params[item.params.name] = item.params.value;
+						delete item.params.name;
+						delete item.params.value;
+					});
+
+					state.ruleForm.rule = state.rule;
+
+					if (state.ruleForm.nodeId !== 0) {
+						//修改
+						api.node.edit(state.ruleForm).then(() => {
+							ElMessage.success('数据节点类型修改成功');
+							closeDialog(); // 关闭弹窗
+							emit('typeList');
+						});
+					} else {
+						//添加
+
+						api.node.add(state.ruleForm).then(() => {
+							ElMessage.success('数据节点类型添加成功');
+							closeDialog(); // 关闭弹窗
+							emit('typeList');
+						});
+					}
+				}
+			});
+		};
+
+		return {
+			addRule,
+			delRule,
+			openDialog,
+			closeDialog,
+			onCancel,
+			onSubmit,
+			formRef,
+			...toRefs(state),
+		};
+	},
+});
+</script>
+<style>
+.el-input__wrapper {
+	width: 98%;
+}
+
+.box-content {
+	border: 1px solid #e8e8e8;
+	margin: 10px;
+	padding: 10px;
+}
+
+.content-f {
+	display: flex;
+	margin-bottom: 10px;
+}
+.content-f .el-input__wrapper {
+	margin-right: 5px;
+}
+.addbutton {
+	width: 100%;
+	margin-top: 10px;
+}
+.conicon {
+	width: 55px;
+	height: 25px;
+
+	font-size: 28px;
+	line-height: 28px;
+	cursor: pointer;
+}
+</style>

src/views/datahub/modeling/detail.vue

@@ -0,0 +1,273 @@
+<template>
+	<div class="system-dic-container">
+		<div class="content">
+			<div class="cont_box">
+				<div class="title">数据表名：{{ detail.name }}</div>
+				<div class="title">数据表表名：{{ detail.name }}</div>
+		
+			</div>
+		</div>
+
+		<div class="content-box">
+
+
+                        <div class="wu-box">
+						 <div class="system-user-search mb15">
+        <el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="68px">
+          <el-form-item label="字段标题" prop="name">
+            <el-input v-model="tableData.param.name" placeholder="请输入产品名称" clearable size="default" style="width: 240px" @keyup.enter.native="typeList" />
+          </el-form-item>
+          <el-form-item label="字段名称" prop="deviceType">
+            <el-input v-model="tableData.param.deviceType" placeholder="请输入设备类型" clearable size="default" style="width: 240px" @keyup.enter.native="typeList" />
+          </el-form-item>
+        
+          <el-form-item>
+            <el-button size="default" type="primary" class="ml10" @click="typeList">
+              <el-icon>
+                <ele-Search />
+              </el-icon>
+              查询
+            </el-button>
+            <el-button size="default" @click="resetQuery(queryRef)">
+              <el-icon>
+                <ele-Refresh />
+              </el-icon>
+              重置
+            </el-button>
+            <el-button size="default" type="success" class="ml10" @click="onOpenAddDic">
+              <el-icon>
+                <ele-FolderAdd />
+              </el-icon>
+              新增字段
+            </el-button>
+            <el-button size="default" type="danger" class="ml10" @click="onRowDel(null)">
+              <el-icon>
+                <ele-Delete />
+              </el-icon>
+              删除
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+                       
+
+                         <el-table :data="tableData.data" style="width: 100%" >
+        <el-table-column label="ID" align="center" prop="nodeId" width="80" />
+        <el-table-column label="字段标题" prop="key" :show-overflow-tooltip="true" />
+        <el-table-column label="字段名称" prop="name" :show-overflow-tooltip="true" />
+        <el-table-column label="字段类型" prop="dataType" :show-overflow-tooltip="true" />
+        <el-table-column label="字段长度" prop="value" :show-overflow-tooltip="true" />
+        <el-table-column label="默认值" prop="value" :show-overflow-tooltip="true" />
+        <el-table-column label="备注说明" prop="value" :show-overflow-tooltip="true" />
+		  <el-table-column prop="createdAt" label="创建时间" align="center" width="180"></el-table-column> 
+
+        <el-table-column label="操作" width="200" align="center">
+          <template #default="scope">
+	
+
+            <el-button size="small" text type="warning" @click="onOpenEdit1(scope.row)">修改</el-button>
+            <el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
+          </template>
+        </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" />
+           </div>         
+                  
+
+
+
+
+        </div>
+ <EditDic ref="editDicRef" @typeList="typeList" />
+	</div>
+</template>            
+<script lang="ts">
+import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
+import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue';
+import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
+import { useRoute } from 'vue-router';
+import EditDic from './component/editNode.vue';
+import api from '/@/api/datahub';
+
+interface TableDataState {
+	ids: number[];
+	tableData: {
+		data: [];
+		total: number;
+		loading: boolean;
+		param: {
+			pageNum: number;
+			pageSize: number;
+			name: string;
+			deviceType: string;
+			status: string;
+			dateRange: string[];
+		};
+	};
+}
+export default defineComponent({
+    name: 'dataDetail',
+    components: { EditDic },
+    setup(prop, context) {
+        		const editDicRef = ref();
+
+		const route = useRoute();
+        const state = reactive<TableDataState>({
+            config: {},
+		
+			isShowDialog: false,
+			detail: [],
+            
+			tableData: {
+				data: [],
+				total: 0,
+				loading: false,
+				param: {
+					pageNum: 1,
+					pageSize: 10,
+                    sourceId: route.params && route.params.sourceId,
+					status: '',
+					dateRange: [],
+				},
+			},
+		});
+
+
+
+        onMounted(() => {
+			
+
+                typeList();
+		});
+
+        const typeList = () => {
+			api.node.getList(state.tableData.param).then((res: any) => {
+				state.tableData.data = res.list;
+				state.tableData.total = res.Total;
+			});
+		};
+
+
+        const CkOption=()=>{
+                if(state.developer_status==1){
+                    api.common.undeploy({sourceId:route.params.sourceId}).then((res: any) => {
+                        ElMessage.success('操作成功');
+                        state.developer_status=0;
+                    });
+                }else{
+                    api.common.deploy({sourceId:route.params.sourceId}).then((res: any) => {
+                        ElMessage.success('操作成功');
+                        state.developer_status=1;
+                    });
+                }
+		}
+        const handleClick = (tab: TabsPaneContext, event: Event) => {
+			console.log(tab, event);
+		};
+
+        	const onRowDel = (row: TableDataRow) => {
+			let msg = '你确定要删除所选数据？';
+			let ids: number[] = [];
+			if (row) {
+				msg = `此操作将永久删除数据节点：“${row.name}”，是否继续?`;
+				ids = row.nodeId;
+			} else {
+				ids = state.ids;
+			}
+			if (ids.length === 0) {
+				ElMessage.error('请选择要删除的数据。');
+				return;
+			}
+			ElMessageBox.confirm(msg, '提示', {
+				confirmButtonText: '确认',
+				cancelButtonText: '取消',
+				type: 'warning',
+			})
+				.then(() => {
+					api.node.delete(ids).then(() => {
+						ElMessage.success('删除成功');
+						typeList();
+					});
+				})
+				.catch(() => {});
+		};
+
+        	// 打开修改数据源弹窗
+        const onOpenEdit = (row: TableDataRow) => {
+			editDicRef.value.openDialog(row);
+		};
+
+        	return {
+			Edit,
+            editDicRef,
+            typeList,
+            onRowDel,
+            onOpenEdit,
+            handleClick,
+			CkOption,
+			...toRefs(state),
+		};
+    },
+});
+
+</script>
+<style>
+.content {
+	background: #fff;
+	width: 100%;
+	padding: 20px;
+}
+.content-box {
+	background: #fff;
+	width: 100%;
+	padding: 20px;
+	margin-top: 20px;
+}
+.cont_box {
+	display: flex;
+}
+.cont_box .title {
+	font-size: 24px;
+}
+.cont_box .pro-status {
+	line-height: 40px;
+	margin-left: 30px;
+}
+.cont_box .pro-status .on {
+	background: #52c41a;
+}
+.cont_box .pro-status .off {
+	background: #c41a1a;
+}
+.cont_box .pro-status span {
+	position: relative;
+	top: -1px;
+	display: inline-block;
+	width: 6px;
+	height: 6px;
+	vertical-align: middle;
+	border-radius: 50%;
+	margin-right: 5px;
+}
+.cont_box .pro-option {
+	line-height: 40px;
+	margin-left: 10px;
+	color: #1890ff;
+	cursor: pointer;
+}
+.content-box .pro-box {
+	display: flex;
+	padding: 10px;
+}
+.content-box .pro-box .protitle {
+	font-size: 18px;
+	font-weight: bold;
+	line-height: 35px;
+}
+.content-box .pro-box .buttonedit {
+	border: 0px;
+	color: #1890ff;
+}
+
+
+</style>

src/views/datahub/modeling/index.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="system-dic-container">
+    <el-card shadow="hover">
+      <div class="system-user-search mb15">
+        <el-form :model="tableData.param" ref="queryRef" :inline="true" >
+
+		 
+          <el-form-item label="自建表名称" prop="name">
+            <el-input v-model="tableData.param.name" placeholder="请输入自建表名称" clearable size="default" style="width: 240px" @keyup.enter.native="typeList" />
+          </el-form-item>
+		 
+         
+      
+        
+         
+          <el-form-item>
+            <el-button size="default" type="primary" class="ml10" @click="typeList">
+              <el-icon>
+                <ele-Search />
+              </el-icon>
+              查询
+            </el-button>
+            <el-button size="default" @click="resetQuery(queryRef)">
+              <el-icon>
+                <ele-Refresh />
+              </el-icon>
+              重置
+            </el-button>
+            <el-button size="default" type="success" class="ml10" @click="onOpenAdd">
+              <el-icon>
+                <ele-FolderAdd />
+              </el-icon>
+              新增自建表
+            </el-button>
+       <el-button size="default" type="danger" class="ml10" @click="onRowDel(null)">
+              <el-icon>
+                <ele-Delete />
+              </el-icon>
+              删除
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="ID" align="center" prop="sourceId" width="80" />
+        <el-table-column label="自建表名称" prop="name" :show-overflow-tooltip="true" />
+        <el-table-column label="自建表表名" prop="name" :show-overflow-tooltip="true" />
+        
+      
+
+		  <el-table-column prop="createdAt" label="创建时间" align="center" width="180"></el-table-column> 
+
+        <el-table-column label="操作" width="200" align="center">
+          <template #default="scope">
+		   	<router-link :to="'/datahub/modeling/detail/' + scope.row.sourceId" class="link-type" style="padding-right: 12px;
+    font-size: 12px;color: #409eff;">
+              <span>字段管理</span>
+            </router-link>
+
+            <el-button size="small" text type="warning" @click="onOpenEdit(scope.row)">修改</el-button>
+            <el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
+          </template>
+        </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-card>
+    <EditDic ref="editDicRef" @typeList="typeList" />
+	    <Detail ref="detailRef"  />
+
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
+import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
+import EditDic from './component/edit.vue';
+import api from '/@/api/datahub';
+
+// 定义接口来定义对象的类型
+interface TableDataRow {
+	sourceId: number;
+	name: string;
+	key: string;
+	status: number;
+	from: string;
+	createBy: string;
+}
+interface TableDataState {
+	ids: number[];
+	tableData: {
+		data: Array<TableDataRow>;
+		total: number;
+		loading: boolean;
+		param: {
+			pageNum: number;
+			pageSize: number;
+			name: string;
+			key: string;
+			from: string;
+			
+		};
+	};
+}
+
+export default defineComponent({
+	name: 'sourcelist',
+	components: { EditDic },
+	setup() {
+		const addDicRef = ref();
+		const editDicRef = ref();
+		const queryRef = ref();
+		const state = reactive<TableDataState>({
+			typeData: [
+				{
+					label: 'api导入',
+					value: '1',
+				},
+				{
+					label: '数据库',
+					value: '2',
+				},
+				{
+					label: '文件',
+					value: '3',
+				},
+			],
+			ids: [],
+			tableData: {
+				data: [],
+				total: 0,
+				loading: false,
+				param: {
+					pageNum: 1,
+					pageSize: 10,
+					name: '',
+					types: '',
+					status:'',
+				},
+			},
+		});
+		// 初始化表格数据
+		const initTableData = () => {
+			typeList();
+		};
+		const typeList = () => {
+			api.common.getList(state.tableData.param).then((res: any) => {
+				state.tableData.data = res.list;
+				state.tableData.total = res.Total;
+			});
+		};
+		// 打开新增自建表弹窗
+		const onOpenAdd = () => {
+			editDicRef.value.openDialog();
+		};
+		// 打开修改自建表弹窗
+		const onOpenEdit = (row: TableDataRow) => {
+			editDicRef.value.openDialog(row);
+		};
+		const onRowDel = (row: TableDataRow) => {
+			let msg = '你确定要删除所选数据？';
+			let ids: number[] = [];
+			if (row) {
+				msg = `此操作将永久删除自建表：“${row.name}”，是否继续?`;
+				ids = [row.sourceId];
+			} else {
+				ids = state.ids;
+			}
+			if (ids.length === 0) {
+				ElMessage.error('请选择要删除的数据。');
+				return;
+			}
+			ElMessageBox.confirm(msg, '提示', {
+				confirmButtonText: '确认',
+				cancelButtonText: '取消',
+				type: 'warning',
+			})
+				.then(() => {
+					api.common.delete(ids).then(() => {
+						ElMessage.success('删除成功');
+						typeList();
+					});
+				})
+				.catch(() => {});
+		};
+		// 页面加载时
+		onMounted(() => {
+			initTableData();
+		});
+		/** 重置按钮操作 */
+		const resetQuery = (formEl: FormInstance | undefined) => {
+			if (!formEl) return;
+			formEl.resetFields();
+			typeList();
+		};
+		// 多选框选中数据
+		const handleSelectionChange = (selection: TableDataRow[]) => {
+			state.ids = selection.map((item) => item.sourceId);
+		};
+	
+		return {
+			addDicRef,
+			editDicRef,
+			queryRef,
+			onOpenAdd,
+			onOpenEdit,
+			onRowDel,
+			typeList,
+			resetQuery,
+			handleSelectionChange,
+			...toRefs(state),
+		};
+	},
+});
+</script>