feat: 新增数据源设备中增加查询的选项

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

@@ -1,5 +1,12 @@
 <template>
-	<el-dialog class="api-edit" v-model="showDialog" :title="`${formData.sourceId ? '编辑数据源' : '新增数据源'}`" width="800px" :close-on-click-modal="false" :close-on-press-escape="false">
+	<el-dialog
+		class="api-edit"
+		v-model="showDialog"
+		:title="`${formData.sourceId ? '编辑数据源' : '新增数据源'}`"
+		width="800px"
+		:close-on-click-modal="false"
+		:close-on-press-escape="false"
+	>
 		<el-form class="inline-form" ref="formRef" :model="formData" :rules="ruleForm" label-width="120px">
 			<el-form-item label="数据源标识" prop="key">
 				<el-input v-model="formData.key" placeholder="请输入数据源名称" :disabled="formData.sourceId" />
@@ -14,15 +21,13 @@
 			<el-form-item label="数据来源" prop="from" v-if="!formData.sourceId">
 				<el-radio-group v-model="formData.from">
 					<el-radio :label="1">api导入</el-radio>
-					<el-radio :label="4">设备</el-radio>
+					<el-radio :label="4">设备或产品</el-radio>
 					<el-radio :label="2">数据库</el-radio>
 				</el-radio-group>
 			</el-form-item>
 			<el-divider content-position="left">数据源配置</el-divider>
 
-
 			<div v-if="formData.from == 1">
-
 				<el-form-item label="请求方法" prop="config.method">
 					<el-select v-model="formData.config.method" :rules="ruleForm['config.method']" placeholder="请选择请求方法">
 						<el-option v-for="item in methodData" :key="item.value" :label="item.label" :value="item.value" />
@@ -34,16 +39,19 @@
 				</el-form-item>
 
 				<el-form-item label="定时请求" prop="config.cronExpression">
-					<div style="display:flex">
+					<div style="display: flex">
 						<el-input v-model="formData.config.cronExpression" placeholder="请输入cron表达式" :rules="ruleForm['config.cronExpression']" />
-						<el-button type="success" @click="showCron('config')" style="    margin-left: 5px;">设置</el-button>
-
+						<el-button type="success" @click="showCron('config')" style="margin-left: 5px">设置</el-button>
 					</div>
 				</el-form-item>
 
 				<div class="box-content">
 					<div>
-						<div v-for="(item, index) in requestParams" :key="index" style="padding: 10px; border: 1px solid #eee; margin-bottom: 10px; position: relative">
+						<div
+							v-for="(item, index) in requestParams"
+							:key="index"
+							style="padding: 10px; border: 1px solid #eee; margin-bottom: 10px; position: relative"
+						>
 							<div class="conicon" style="width: 100%; text-align: right; position: absolute; right: -8px; top: -8px; color: red">
 								<el-icon @click="delParams(index)">
 									<CircleClose />
@@ -75,8 +83,16 @@
 			</div>
 			<div v-if="formData.from == 4">
 				<el-form-item label="选择设备" prop="devconfig.deviceKey">
-					<el-select v-model="formData.devconfig.deviceKey" :rules="ruleForm['devconfig.deviceKey']" filterable placeholder="请选择设备" @change="setNode">
-						<el-option v-for="item in sourceData" :key="item.key" :label="item.name" :value="item.id">
+					<el-select v-model="formData.devconfig.deviceKey" :rules="ruleForm['devconfig.deviceKey']" filterable placeholder="请选择设备" @change="formData.devconfig.productKey = ''">
+						<el-option v-for="item in sourceData" :key="item.key" :label="item.name" :value="item.key">
+							<span style="float: left">{{ item.name }}</span>
+							<span style="float: right; font-size: 13px">{{ item.key }}</span>
+						</el-option>
+					</el-select>
+				</el-form-item>
+				<el-form-item label="选择产品" prop="devconfig.productKey">
+					<el-select v-model="formData.devconfig.productKey" :rules="ruleForm['devconfig.productKey']" filterable placeholder="请选择产品" @change="formData.devconfig.deviceKey = ''">
+						<el-option v-for="item in producList" :key="item.key" :label="item.name" :value="item.key">
 							<span style="float: left">{{ item.name }}</span>
 							<span style="float: right; font-size: 13px">{{ item.key }}</span>
 						</el-option>
@@ -84,15 +100,11 @@
 				</el-form-item>
 			</div>
 
-
-
 			<div v-if="formData.from == 2">
-
 				<el-form-item label="数据来源" prop="tabconfig.type">
 					<el-radio-group v-model="formData.tabconfig.type" :rules="ruleForm['tabconfig.type']">
 						<el-radio label="mysql">mysql</el-radio>
 						<el-radio label="mssql">mssql</el-radio>
-
 					</el-radio-group>
 				</el-form-item>
 
@@ -123,12 +135,15 @@
 					<el-radio-group v-model="formData.tabconfig.queryType" :rules="ruleForm['tabconfig.queryType']">
 						<el-radio label="tableName">数据表</el-radio>
 						<el-radio label="sql">Sql</el-radio>
-
 					</el-radio-group>
 				</el-form-item>
 
 				<el-form-item label="" prop="tabconfig.tableName">
-					<el-input v-model="formData.tabconfig.tableName" type="textarea" :placeholder="formData.tabconfig.queryType == 'sql' ? '请输入sql语句' : '请输入表名称'" />
+					<el-input
+						v-model="formData.tabconfig.tableName"
+						type="textarea"
+						:placeholder="formData.tabconfig.queryType == 'sql' ? '请输入sql语句' : '请输入表名称'"
+					/>
 				</el-form-item>
 
 				<el-form-item label="主键字段" prop="tabconfig.pk">
@@ -140,16 +155,12 @@
 				</el-form-item>
 
 				<el-form-item label="任务表达式" prop="tabconfig.cronExpression">
-
-					<div style="display:flex">
+					<div style="display: flex">
 						<el-input v-model="formData.tabconfig.cronExpression" placeholder="请输入cron任务表达式" :rules="ruleForm['tabconfig.cronExpression']" />
-						<el-button type="success" @click="showCron('tabconfig')" style="    margin-left: 5px;">设置</el-button>
-
+						<el-button type="success" @click="showCron('tabconfig')" style="margin-left: 5px">设置</el-button>
 					</div>
-
 				</el-form-item>
 			</div>
-
 		</el-form>
 
 		<template #footer>
@@ -178,13 +189,14 @@
 
 <script lang="ts" setup>
 import { ref, reactive, nextTick } from 'vue'
-import api from '/@/api/datahub';
+import api from '/@/api/datahub'
+import deviceApi from '/@/api/device'
 import { ruleRequired } from '/@/utils/validator'
-import 'vue3-json-viewer/dist/index.css';
-import vue3cron from '/@/components/vue3cron/vue3cron.vue';
+import 'vue3-json-viewer/dist/index.css'
+import vue3cron from '/@/components/vue3cron/vue3cron.vue'
 
 import { ElMessage } from 'element-plus'
-import { Delete, CircleClose, } from '@element-plus/icons-vue';
+import { Delete, CircleClose } from '@element-plus/icons-vue'
 
 const emit = defineEmits(['typeList'])
 
@@ -194,8 +206,9 @@ const cronShow = ref(false)
 const formRef = ref()
 const jsonData = ref()
 const crontype = ref()
-const sourceData = ref([]);
-const sourceId = ref();
+const sourceData = ref([])
+const producList = ref([])
+const sourceId = ref()
 const methodData = ref([
 	{
 		label: 'GET',
@@ -205,7 +218,7 @@ const methodData = ref([
 		label: 'POST',
 		value: 'post',
 	},
-]);
+])
 
 const paramData = ref([
 	{
@@ -220,7 +233,7 @@ const paramData = ref([
 		lable: 'param',
 		value: 'param',
 	},
-]);
+])
 
 const requestParams = ref([
 	[
@@ -231,17 +244,15 @@ const requestParams = ref([
 			value: '',
 		},
 	],
-]);
-const config = ref({
-	method: '',
-})
+])
+
 const delParams = (index: number) => {
-	requestParams.value.splice(index, 1);
-};
+	requestParams.value.splice(index, 1)
+}
 
 const delParamss = (index: number, bbb: number) => {
-	requestParams.value[index].splice(bbb, 1);
-};
+	requestParams.value[index].splice(bbb, 1)
+}
 
 const addParamss = () => {
 	requestParams.value.push([
@@ -251,53 +262,44 @@ const addParamss = () => {
 			name: '',
 			value: '',
 		},
-	]);
-};
+	])
+}
 const addParams = (index: number) => {
 	requestParams.value[index].push({
 		type: '',
 		key: '',
 		name: '',
 		value: '',
-	});
-};
+	})
+}
 const handlelisten = (e: any) => {
 	if (e.type == 'config') {
 		formData.config.cronExpression = e.cron
 	} else if (e.type == 'tabconfig') {
 		formData.tabconfig.cronExpression = e.cron
 	}
-};
+}
 const showCron = (type: string) => {
 	crontype.value = type
-	cronShow.value = true;
-
-};
+	cronShow.value = true
+}
 const cronclose = () => {
-	cronShow.value = false;
+	cronShow.value = false
 }
 const onTest = () => {
 	if (formData.from == 1) {
 		api.common.api(sourceId.value).then((res: any) => {
-			jsonData.value = JSON.parse(res.data);
-			dialogVisible.value = true;
-		});
+			jsonData.value = JSON.parse(res.data)
+			dialogVisible.value = true
+		})
 	} else if (formData.from == 4) {
 		api.common.devapi(sourceId.value).then((res: any) => {
-			jsonData.value = JSON.parse(res.data);
-			dialogVisible.value = true;
-		});
+			jsonData.value = JSON.parse(res.data)
+			dialogVisible.value = true
+		})
 	}
-};
+}
 
-const setNode = (event:any) => {
-	sourceData.value.forEach((item:any) => {
-		if (item.id == event) {
-			formData.devconfig.productKey = item.product.key;
-			formData.devconfig.deviceKey = item.key;
-		}
-	});
-};
 const baseForm = {
 	sourceId: undefined,
 	name: '',
@@ -312,7 +314,7 @@ const baseForm = {
 	},
 	devconfig: {
 		deviceKey: '',
-		productKey:'',
+		productKey: '',
 	},
 	tabconfig: {
 		type: 'mysql',
@@ -326,16 +328,13 @@ const baseForm = {
 		pk: '',
 		num: '',
 		cronExpression: '',
-	}
+	},
 }
-const onKeyclick = () => {
-
-};
+const onKeyclick = () => {}
 const formData = reactive({
 	...baseForm,
 })
 
-
 const ruleForm = {
 	key: [ruleRequired('数据源标识不能为空')],
 	name: [ruleRequired('数据源名称不能为空')],
@@ -346,17 +345,16 @@ const ruleForm = {
 		{
 			validator: (rule: any, value: string, callback: any) => {
 				if (formData.from === 1 && !formData.config.method) {
-					callback(new Error('请求方法不能为空'));
+					callback(new Error('请求方法不能为空'))
 				} else {
-					callback();
+					callback()
 				}
 			},
-			trigger: 'change'
-		}
+			trigger: 'change',
+		},
 	],
 	'config.url': [ruleRequired('请求地址不能为空')],
 	'config.cronExpression': [ruleRequired('定时请求不能为空')],
-	'devconfig.deviceKey': [ruleRequired('请选择设备')],
 	'tabconfig.type': [ruleRequired('请选择数据来源')],
 	'tabconfig.host': [ruleRequired('请输入主机地址')],
 	'tabconfig.port': [ruleRequired('请输入端口号')],
@@ -368,53 +366,57 @@ const ruleForm = {
 	'tabconfig.pk': [ruleRequired('请输入主键字段')],
 	'tabconfig.num': [ruleRequired('请输入每次获取数量')],
 	'tabconfig.cronExpression': [ruleRequired('请输入cron任务表达式')],
-
 }
 const getDevData = () => {
 	api.common.getdevList({}).then((res: any) => {
-		sourceData.value = res.device;
-	});
-};
+		sourceData.value = res.device
+	})
+	deviceApi.product.getLists().then((res: any) => {
+		producList.value = res.product
+	})
+}
 
 const onSubmit = async () => {
 	await formRef.value.validate()
-	
-
 
 	if (formData.from == 1) {
 		let form = {
-			sourceId: sourceId.value? sourceId.value:'',
+			sourceId: sourceId.value ? sourceId.value : '',
 			key: formData.key,
 			name: formData.name,
 			desc: formData.desc,
 			from: formData.from,
 			config: {
 				...formData.config,
-				requestParams: requestParams.value
+				requestParams: requestParams.value,
 			},
-		};
+		}
 		const theApi = sourceId.value ? api.common.edit : api.common.add
 		await theApi(form)
 		ElMessage.success('操作成功')
 		resetForm()
 		showDialog.value = false
 		emit('typeList')
-
 	} else if (formData.from == 4) {
+
+		if (!formData.devconfig.deviceKey || !formData.devconfig.productKey) {
+			return ElMessage('请先选择设备或产品')
+		}
+
 		let form = {
-						sourceId: formData.sourceId ? formData.sourceId : '',
-						key: formData.key,
-						name: formData.name,
-						desc: formData.desc,
-						from: formData.from,
-						config: formData.devconfig
-			};
-				const theApi = formData.sourceId ? api.common.devedit : api.common.devadd
-				await theApi(form)
-				ElMessage.success('操作成功')
-				resetForm()
-				showDialog.value = false
-				emit('typeList')
+			sourceId: formData.sourceId ? formData.sourceId : '',
+			key: formData.key,
+			name: formData.name,
+			desc: formData.desc,
+			from: formData.from,
+			config: formData.devconfig,
+		}
+		const theApi = formData.sourceId ? api.common.devedit : api.common.devadd
+		await theApi(form)
+		ElMessage.success('操作成功')
+		resetForm()
+		showDialog.value = false
+		emit('typeList')
 	} else if (formData.from == 2) {
 		let form = {
 			sourceId: formData.sourceId ? formData.sourceId : '',
@@ -422,8 +424,8 @@ const onSubmit = async () => {
 			name: formData.name,
 			desc: formData.desc,
 			from: formData.from,
-			config: formData.tabconfig
-		};
+			config: formData.tabconfig,
+		}
 		const theApi = formData.sourceId ? api.common.dbedit : api.common.dbadd
 		await theApi(form)
 		ElMessage.success('操作成功')
@@ -446,7 +448,6 @@ const resetForm = async () => {
 			},
 		],
 	]
-
 }
 
 const openDialog = async (row: any) => {
@@ -455,23 +456,20 @@ const openDialog = async (row: any) => {
 
 	nextTick(() => {
 		if (row) {
-
-			sourceId.value = row.sourceId;
+			sourceId.value = row.sourceId
 			api.common.detail(row.sourceId).then((res: any) => {
 				Object.assign(formData, { ...res.data })
 				if (res.data.from == 1) {
-					formData.config = res.data.apiConfig;
-					requestParams.value = res.data.apiConfig.requestParams;
+					formData.config = res.data.apiConfig
+					requestParams.value = res.data.apiConfig.requestParams
 				} else if (res.data.from == 4) {
-					formData.devconfig = res.data.deviceConfig;
+					formData.devconfig = res.data.deviceConfig
 				} else if (res.data.from == 2) {
-					formData.tabconfig = res.data.dbConfig;
+					formData.tabconfig = res.data.dbConfig
 				}
-
-			});
+			})
 		}
-		getDevData();
-
+		getDevData()
 	})
 }
 
@@ -521,4 +519,4 @@ defineExpose({ openDialog })
 .jv-node {
 	margin-left: 25px;
 }
-</style>
+</style>