完成数据源添加和列表

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

@@ -1,86 +1,83 @@
 <template>
 	<div class="system-edit-dic-container">
-		<el-dialog :title="(ruleForm.sourceId!==0?'修改':'添加')+'数据源'" v-model="isShowDialog" width="769px">
+		<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="name">
-          <el-input v-model="ruleForm.name" 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="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="from">
-					<el-radio-group v-model="ruleForm.from"  >
+				<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-form-item label="地址" prop="host">
-          <el-input v-model="ruleForm.host" placeholder="请输入地址" />
-        </el-form-item>
-
-         <el-form-item label="端口" prop="port">
-          <el-input v-model="ruleForm.port" placeholder="请输入端口" />
-        </el-form-item>
-        <el-form-item label="用户名" prop="userName">
-          <el-input v-model="ruleForm.userName" placeholder="请输入用户名" />
-        </el-form-item>
-        <el-form-item label="密码" prop="password">
-          <el-input v-model="ruleForm.password" placeholder="请输入密码" />
-        </el-form-item>
+				<el-divider content-position="left">规则表达式</el-divider>
 
-        <el-divider content-position="left">数据源配置</el-divider>
+				<div v-for="(item, index) in rule" :key="index">
+					<el-form-item label="表达式" prop="expression">
+						<el-input v-model="item.expression" placeholder="请输入规则表达式" />
+					</el-form-item>
 
-        <el-form-item label="请求方法" prop="method">
-              <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="参数" prop="params">
+						<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-divider content-position="left">数据源配置</el-divider>
 
+				<el-form-item label="请求方法" prop="method">
+					<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="请求地址" prop="url">
-          <el-input v-model="config.url" placeholder="请输入请求地址" />
-        </el-form-item>
-        <el-form-item label="更新时间" prop="interval">
-          <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">
-        
-        </div>
-
-  	    <el-form-item label="状态" prop="status">
-					<el-radio-group v-model="ruleForm.status"  >
-						<el-radio label="0">未启用</el-radio>
+				<el-form-item label="请求地址" prop="url">
+					<el-input v-model="config.url" placeholder="请输入请求地址" />
+				</el-form-item>
 
-						<el-radio label="1">启用</el-radio>
-					</el-radio-group>
+				<el-form-item label="更新时间" prop="interval">
+					<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>
 
-        <el-form-item label="描述" prop="description">
-          <el-input v-model="ruleForm.desc" type="textarea" placeholder="请输入内容"></el-input>
-        </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>
+					<el-button type="primary" @click="onSubmit" size="default">{{ ruleForm.sourceId !== 0 ? '修 改' : '添 加' }}</el-button>
 				</span>
 			</template>
 		</el-dialog>
@@ -88,120 +85,181 @@
 </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';
+import { Delete, Minus, Right } from '@element-plus/icons-vue';
+
 interface RuleFormState {
-  sourceId:number;
-  name:string;
-  from:number;
-  key:string;
-  port:string;
-  userName:string;
-  password:string;
-  desc:string;
-  status:number;
+	sourceId: number;
+	name: string;
+	from: number;
+	key: string;
+	userName: string;
+	password: string;
+	description: string;
+	status: number;
 }
 interface DicState {
 	isShowDialog: boolean;
 	ruleForm: RuleFormState;
-  rules:{}
+	rules: {};
 }
 
 export default defineComponent({
 	name: 'Edit',
-	setup(prop,{emit}) {
-    const formRef = ref<HTMLElement | null>(null);
+	components: { Delete, Minus, Right },
+
+	setup(prop, { emit }) {
+		const formRef = ref<HTMLElement | null>(null);
 		const state = reactive<DicState>({
 			isShowDialog: false,
-      config:{},
-      requestParams:[{
-        type:'',
-        key:'',
-        name:'',
-        value:''
-      }],
-      methodData:[{
-          label:'GET',
-          value:'get'
-        },{
-          label:'POST',
-          value:'post'
-        },{
-          label:'PUT',
-          value:'put'
-      }],
+			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:'second',
-          value:'秒'
-        },
-         {
-          label:'minute',
-          value:'分'
-        },
-        {
-          label:'hour',
-          value:'时'
-        },
-        {
-          label:'day',
-          value:'天'
-        },
-      ],
+			unitData: [
+				{
+					label: '秒',
+					value: 'second',
+				},
+				{
+					label: '分',
+					value: 'minute',
+				},
+				{
+					label: '时',
+					value: 'hour',
+				},
+				{
+					label: '天',
+					value: 'day',
+				},
+			],
 
-			ruleForm: {
-        sourceId:0,
-        name:'',
-        from:1,
-        key:'',
-        port:'',
-        userName:'',
-        password:'',
-        desc:'',
-        status:1,
+			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' }],
+				host: [{ required: true, message: '地址不能为空', trigger: 'blur' }],
+				port: [{ required: true, message: '端口不能为空', trigger: 'blur' }],
+				userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+				password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
 			},
-      rules: {
-        name: [
-          { required: true, message: "数据源名称不能为空", trigger: "blur" }
-        ],
-        from: [
-          { required: true, message: "数据源类型不能为空", trigger: "blur" }
-        ],
-        host: [{ required: true, message: '地址不能为空', trigger: 'blur' }],
-        port: [{ required: true, message: '端口不能为空', trigger: 'blur' }],
-        userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
-        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
-      }
 		});
-		// 打开弹窗
-		const openDialog = (row: RuleFormState|null) => {
-      resetForm();
+		const delParams = (index) => {
+			state.requestParams.splice(index, 1);
+		};
 
+		const addParams = () => {
+			state.requestParams.push({
+				type: '',
+				key: '',
+				name: '',
+				value: '',
+			});
+		};
 
-      if (row){
-        // api.dict.getType(row.id).then((res:any)=>{
-        //   state.ruleForm = res.data.dictType
-        // })
-        state.ruleForm = row;
-      }
+		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.dict.getType(row.id).then((res:any)=>{
+				//   state.ruleForm = res.data.dictType
+				// })
+				state.ruleForm = row;
+			}
 			state.isShowDialog = true;
 		};
-    const resetForm = ()=>{
-      state.ruleForm = {
-       sourceId:0,
-        name:'',
-        from:1,
-        key:'',
-        port:'',
-        userName:'',
-        password:'',
-        description:'',
-        status:1
-      }
-    };
+		const resetForm = () => {
+			state.ruleForm = {
+				sourceId: 0,
+				name: '',
+				from: 1,
+				key: '',
+				port: '',
+				description: '',
+			};
+		};
 		// 关闭弹窗
 		const closeDialog = () => {
 			state.isShowDialog = false;
@@ -212,47 +270,83 @@ export default defineComponent({
 		};
 		// 新增
 		const onSubmit = () => {
-      const formWrap = unref(formRef) as any;
-      if (!formWrap) return;
-      formWrap.validate((valid: boolean) => {
-        if (valid) {
-          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')
-            })
-          }
-        }
-      });
-		};
+			const formWrap = unref(formRef) as any;
+			if (!formWrap) return;
+			formWrap.validate((valid: boolean) => {
+				if (valid) {
+					//修改rule数据
+					state.rule.forEach((item, index) => {
+						state.ruledata[index].expression = item.expression;
+						state.ruledata[index].params[item.params.name] = item.params.value;
+					});
 
+					state.ruleForm.rule = state.ruledata;
+					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,
+			formRef,
 			...toRefs(state),
 		};
 	},
 });
 </script>
 <style>
-.el-input__wrapper{
-  width:98%;
+.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;
 }
-.box-content{
-  
-  
+.addbutton {
+	width: 100%;
+	margin-top: 10px;
+}
+.conicon {
+	width: 55px;
+	height: 25px;
+
+	font-size: 28px;
+	line-height: 28px;
+	cursor: pointer;
 }
 </style>

src/views/datahub/source/index.vue

@@ -3,20 +3,22 @@
     <el-card shadow="hover">
       <div class="system-user-search mb15">
         <el-form :model="tableData.param" ref="queryRef" :inline="true" >
+
+		 <el-form-item label="数据源标识" prop="key">
+            <el-input v-model="tableData.param.key" placeholder="数据源标识" clearable size="default" style="width: 240px" @keyup.enter.native="typeList" />
+          </el-form-item>
           <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="types">
-            <el-input v-model="tableData.param.types" placeholder="请输入数据源类型" clearable size="default" style="width: 240px" @keyup.enter.native="typeList" />
-          </el-form-item>
-          <el-form-item label="数据源地址" prop="host">
-            <el-input v-model="tableData.param.host" placeholder="请输入数据源地址" clearable size="default" style="width: 240px" @keyup.enter.native="typeList" />
+		 
+          <el-form-item label="数据源类型" prop="host">
+				<el-select v-model="tableData.param.from" placeholder="请选择数据源类型" @keyup.enter.native="typeList">
+						<el-option v-for="item in typeData" :key="item.value" :label="item.label" :value="item.value" />
+					</el-select>
           </el-form-item>
       
         
-          <el-form-item label="创建时间" prop="dateRange">
-            <el-date-picker v-model="tableData.param.dateRange" size="default" style="width: 240px" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
-          </el-form-item>
+         
           <el-form-item>
             <el-button size="default" type="primary" class="ml10" @click="typeList">
               <el-icon>
@@ -42,19 +44,29 @@
       </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="id" width="80" />
+        <el-table-column label="ID" align="center" prop="sourceId" 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="types" :show-overflow-tooltip="true" />
-        <el-table-column label="地址" prop="host" :show-overflow-tooltip="true" />
-        <el-table-column label="端口" prop="port" :show-overflow-tooltip="true" />
+         <el-table-column prop="from" label="数据源类型"  align="center">
+          <template #default="scope">
+		  	<span v-if="scope.row.from==1">api导入</span>
+		  	<span v-if="scope.row.from==2">数据库</span>
+		  	<span v-if="scope.row.from==3">文件</span>
+          </template>
+        </el-table-column>
+
+
        
         
         <el-table-column prop="status" label="状态" width="120" align="center">
           <template #default="scope">
-            <el-tag type="success" size="small" v-if="scope.row.status==1">启用</el-tag>
-            <el-tag type="info" size="small" v-if="scope.row.status==0">未启用</el-tag>
+            <el-tag type="success" size="small" v-if="scope.row.status==1">已发布</el-tag>
+            <el-tag type="info" size="small" v-if="scope.row.status==0">未发布</el-tag>
           </template>
         </el-table-column>
+
+		  <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="primary" @click="onOpenDetail(scope.row)">详情</el-button>
@@ -85,7 +97,7 @@ interface TableDataRow {
 	name: string;
 	key: string;
 	status: number;
-	desc: string;
+	from: string;
 	createBy: string;
 }
 interface TableDataState {
@@ -99,8 +111,8 @@ interface TableDataState {
 			pageSize: number;
 			name: string;
 			key: string;
-			status: string;
-			dateRange: string[];
+			from: string;
+			
 		};
 	};
 }
@@ -114,6 +126,20 @@ export default defineComponent({
 		const queryRef = ref();
 		const detailRef=ref();
 		const state = reactive<TableDataState>({
+			typeData: [
+				{
+					label: 'api导入',
+					value: '1',
+				},
+				{
+					label: '数据库',
+					value: '2',
+				},
+				{
+					label: '文件',
+					value: '3',
+				},
+			],
 			ids: [],
 			tableData: {
 				data: [],
@@ -134,8 +160,8 @@ export default defineComponent({
 		};
 		const typeList = () => {
 			api.common.getList(state.tableData.param).then((res: any) => {
-				state.tableData.data = res.Data;
-				state.tableData.total = res.total;
+				state.tableData.data = res.list;
+				state.tableData.total = res.Total;
 			});
 		};
 		// 打开新增产品弹窗