产品的新增和编辑增加认证方式的填写

src/views/iot/certificate/component/editParams.vue

@@ -407,7 +407,6 @@ const state = reactive({
 })
 const { proxy } = getCurrentInstance() as any
 const { network_certificate } = proxy.useDict('network_certificate')
-console.log(network_certificate)
 // 打开弹窗
 const openDialog = (row: any) => {
 	if (row) {

src/views/iot/certificate/index.vue

@@ -61,35 +61,14 @@
 </template>
 
 <script lang="ts" setup>
-import { toRefs, reactive, onMounted, ref, defineComponent, getCurrentInstance } from 'vue';
+import {  reactive, onMounted, ref, getCurrentInstance } from 'vue';
 import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
-import EditDic from './component/edit.vue';
-import Detail from './component/detail.vue';
 import api from '/@/api/certificateManagement';
 import EditParams from './component/editParams.vue';
 
-// 定义接口来定义对象的类型
-interface TableDataRow {
-	id: number;
-	name: string;
-	code: string;
-	stationId: string;
-	loopTypes: number;
-	energyTypes: number;
-	heatingObject: number;
-	heatingTypes: number;
-	heatingArea: string;
-	forRealArea: string;
-	decade: string;
-	status: number;
-}
 const { proxy } = getCurrentInstance() as any;
 const { network_certificate } = proxy.useDict('network_certificate');
-console.log(network_certificate)
 
-const addDicRef = ref();
-const editDicRef = ref();
-const detailRef = ref();
 const previewRef = ref();
 const editParamsRef = ref();
 const buildConfigRef = ref();
@@ -115,7 +94,6 @@ const initTableData = () => {
 const queryList = () => {
 	state.tableData.loading = true
 	api.certificateManagement.getList(state.tableData.param).then((res: any) => {
-		console.log(res)
 		state.tableData.data = res.Info || [];
 		state.tableData.loading = false
 		state.tableData.total = res.total
@@ -123,20 +101,10 @@ const queryList = () => {
 };
 
 const filterStandard = (type: any) => {
-	console.log(network_certificate.value)
-	let data  = network_certificate.value;
 	let opt = network_certificate.value.filter((ele: any) => {
 		return ele.value == type
 	})
-	return opt[0].label
-	console.log(opt)
-	// network_certificate.value.forEach((element: object) => {
-	// 	console.log(element)
-	// 	if(type == element.value) {
-	// 		console.log(type)
-	// 		return element.label
-	// 	}
-	// });
+	return opt[0]?.label
 }
 
 // 页面加载时

src/views/iot/device/product/component/editPro.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="system-edit-dic-container">
 		<el-dialog :title="(ruleForm.id !== 0 ? '修改' : '添加') + '产品'" v-model="isShowDialog" width="769px">
-			<el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="90px">
+			<el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="100px">
 				<el-form-item label="产品标识" prop="key">
 					<el-input v-model="ruleForm.key" placeholder="请输入产品标识" :disabled="ruleForm.id" />
 				</el-form-item>
@@ -21,17 +21,8 @@
 					</el-cascader>
 				</el-form-item>
 
-				<!-- <el-form-item label="所属部门" prop="deptId">
-          <el-cascader :options="deptData" :props="{ checkStrictly: true, emitPath: false, value: 'deptId', label: 'deptName' }" placeholder="请选择所属部门" clearable class="w100" v-model="ruleForm.deptId">
-            <template #default="{ node, data }">
-              <span>{{ data.deptName }}</span>
-              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
-            </template>
-          </el-cascader>
-        </el-form-item> -->
-
 				<el-form-item label="消息协议" prop="messageProtocol">
-					<el-select v-model="ruleForm.messageProtocol" placeholder="请选择消息协议" @change="changeMessageProtocol">
+					<el-select v-model="ruleForm.messageProtocol" placeholder="请选择消息协议">
 						<el-option v-for="dict in messageData" :key="dict.types" :label="dict.title" :value="dict.types"> </el-option>
 						<!-- 增加系统默认的mqtt选项 -->
 						<el-option label="Sagoo Mqtt" value="SagooMqtt"> </el-option>
@@ -43,13 +34,50 @@
 						<el-option v-for="dict in network_server_type" :key="dict.value" :label="dict.label" :value="dict.value"> </el-option>
 					</el-select>
 				</el-form-item>
+				<!-- 1，mqtt协议设备的认证
+	在添加设备的页面，增加MQTT服务协议设备的认证方式的处理。
+	当传输协议选择为：MQTT服务的时候，下面出现 认证方式的下拉列，分别为Basic、AccessToken接入两个下拉选项。
+	Basic方式：
+	选择这个方式的时候：页面出现，用户名及密码输入框。
+	AccessToken接入方式：
+	选择这个方式的时候：页面出现 Aceess Token的输入框
+	2，TCP及其它协议认证
+	这些配合【网络组件】功能中涉及到的设备通讯协议认证的处理。如果涉及到证书的，需要调用【证书管理】功能维护的证书列表。 -->
+				<!-- 设备认证 -->
+				<template v-if="ruleForm.transportProtocol === 'mqtt_server'">
+					<el-form-item label="认证方式" prop="">
+						<el-radio-group v-model="authType">
+							<el-radio label="Basic">Basic</el-radio>
+							<el-radio label="AccessToken">AccessToken</el-radio>
+						</el-radio-group>
+					</el-form-item>
+					<template v-if="authType === 'Basic'">
+						<el-form-item label="用户名" prop="authUser">
+							<el-input v-model="ruleForm.authUser" placeholder="请输入用户名" />
+						</el-form-item>
+						<el-form-item label="密码" prop="authPasswd">
+							<el-input v-model="ruleForm.authPasswd" placeholder="请输入密码" />
+						</el-form-item>
+					</template>
+					<template v-else>
+						<el-form-item label="Aceess Token" prop="accessToken">
+							<el-input v-model="ruleForm.accessToken" placeholder="请输入Aceess Token" />
+						</el-form-item>
+					</template>
+				</template>
+				<template v-else>
+					<el-form-item label="认证证书" prop="certificateId">
+						<el-select v-model="ruleForm.certificateId" placeholder="请选择证书">
+							<el-option v-for="cert in certList" :key="cert.id" :label="cert.name" :value="cert.id"> </el-option>
+						</el-select>
+					</el-form-item>
+				</template>
 
 				<el-form-item label="设备类型" prop="deviceType">
 					<el-radio-group v-model="ruleForm.deviceType">
 						<el-radio label="设备">设备</el-radio>
 						<el-radio label="网关">网关</el-radio>
 						<el-radio label="子设备">子设备</el-radio>
-
 					</el-radio-group>
 				</el-form-item>
 				<el-form-item label="产品描述	" prop="desc">
@@ -59,7 +87,7 @@
 			<template #footer>
 				<span class="dialog-footer">
 					<el-button @click="onCancel" size="default">取 消</el-button>
-					<el-button type="primary" @click="onSubmit" size="default">{{ ruleForm.id !== 0 ? '修 改' : '添 加' }}</el-button>
+					<el-button type="primary" @click="onSubmit" :loading="submitLoading" size="default">{{ ruleForm.id !== 0 ? '修 改' : '添 加' }}</el-button>
 				</span>
 			</template>
 		</el-dialog>
@@ -69,16 +97,24 @@
 <script lang="ts">
 import { reactive, toRefs, defineComponent, ref, unref, getCurrentInstance } from 'vue'
 import api from '/@/api/device'
+import certApi from '/@/api/certificateManagement';
 import uploadVue from '/@/components/upload/index.vue'
 import { ElMessage, UploadProps } from 'element-plus'
 import getOrigin from '/@/utils/origin'
 
 interface RuleFormState {
 	id: number
+	categoryId: number | string
+	messageProtocol: string
+	transportProtocol: string
+	deviceType: string
 	name: string
-	dictType: string
 	status: number
 	desc: string
+	authUser: string
+	authPasswd: string
+	accessToken: string
+	certificateId: string
 }
 interface DicState {
 	isShowDialog: boolean
@@ -91,6 +127,22 @@ interface DicState {
 	imageUrl: string
 }
 
+const form = {
+	id: 0,
+	name: '',
+	categoryId: '',
+	messageProtocol: '',
+	transportProtocol: '',
+	deviceType: '设备',
+	status: 1,
+	desc: '',
+	authUser: '',
+	authPasswd: '',
+	accessToken: '',
+	certificateId: '',
+
+}
+
 export default defineComponent({
 	name: 'deviceEditPro',
 	components: { uploadVue },
@@ -101,7 +153,10 @@ export default defineComponent({
 		const { proxy } = getCurrentInstance() as any
 		const { network_server_type } = proxy.useDict('network_server_type')
 
-		const state = reactive<DicState>({
+		const certList = ref([])
+		const submitLoading = ref(false)
+
+		const state = reactive<DicState | any>({
 			isShowDialog: false,
 			cateData: [], // 分类数据
 			deptData: [], //
@@ -110,23 +165,13 @@ export default defineComponent({
 			tranData: [], //
 			imageUrl: '', //
 			singleImg: baseURL + '/product/icon/upload',
-
 			ruleForm: {
-				id: 0,
-				name: '',
-				categoryId: '',
-				// deptId: '',
-				messageProtocol: '',
-				transportProtocol: '',
-				deviceType: '设备',
-				status: 1,
-				desc: '',
+				...form
 			},
 			rules: {
 				name: [{ required: true, message: '产品名称不能为空', trigger: 'blur' }],
 				key: [{ required: true, message: '产品标识不能为空', trigger: 'blur' }],
 				parentId: [{ required: true, message: '产品分类不能为空', trigger: 'blur' }],
-				// deptId: [{ required: true, message: '所属部门不能为空', trigger: 'blur' }],
 				messageProtocol: [{ required: true, message: '消息协议不能为空', trigger: 'blur' }],
 				transportProtocol: [{ required: true, message: '传输协议不能为空', trigger: 'blur' }],
 				deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'blur' }],
@@ -150,9 +195,18 @@ export default defineComponent({
 				state.deptData = res || []
 			})
 			api.product.getTypesAll({ handleType: 'protocol' }).then((res: any) => {
-				console.log(res)
 				state.messageData = res || [];
 			});
+
+			// 证书列表
+			certApi.certificateManagement.getList({
+				pageNum: 1,
+				PageSize: 50,
+				status: -1,
+			}).then((res: any) => {
+				certList.value = res.Info || []
+				console.log(res.Info[0])
+			});
 			// api.product.trunsport_protocol_list({ status: -1 }).then((res: any) => {
 			//   state.tranData = res.data || [];
 			// });
@@ -163,19 +217,14 @@ export default defineComponent({
 				state.imageUrl = row.icon
 
 				state.ruleForm = row
-			}else {
+			} else {
 				state.imageUrl = ""
 			}
 			state.isShowDialog = true
 		}
 		const resetForm = () => {
 			state.ruleForm = {
-				id: 0,
-				name: '',
-				dictType: '',
-				deviceType: '设备',
-				status: 1,
-				desc: '',
+				...form
 			}
 		}
 		// 关闭弹窗
@@ -186,43 +235,43 @@ export default defineComponent({
 		const onCancel = () => {
 			closeDialog()
 		}
-		// 消息协议切换的时候，获取新的传输协议列表
-		const changeMessageProtocol = (handleType) => {
-			console.log(handleType)
-		}
 		// 新增
 		const onSubmit = () => {
 			const formWrap = unref(formRef) as any
 			if (!formWrap) return
 			formWrap.validate((valid: boolean) => {
 				if (valid) {
+					submitLoading.value = true
 					if (state.ruleForm.id !== 0) {
 						//修改
 						api.product.edit(state.ruleForm).then(() => {
 							ElMessage.success('产品类型修改成功')
 							closeDialog() // 关闭弹窗
 							emit('typeList')
-						})
+						}).finally(() => submitLoading.value = false)
 					} else {
 						//添加
-						console.log(state.ruleForm)
+						// console.log(state.ruleForm)
 						api.product.add(state.ruleForm).then(() => {
 							ElMessage.success('产品类型添加成功')
 							closeDialog() // 关闭弹窗
 							emit('typeList')
-						})
+						}).finally(() => submitLoading.value = false)
 					}
 				}
 			})
 		}
 
+		const authType = ref('Basic')
 		return {
+			submitLoading,
+			certList,
+			authType,
 			openDialog,
 			handleAvatarSuccess,
 			closeDialog,
 			onCancel,
 			onSubmit,
-			changeMessageProtocol,
 			network_server_type,
 			formRef,
 			...toRefs(state),

src/views/iot/device/product/detail.vue

@@ -227,7 +227,7 @@ export default defineComponent({
 		const editTabRef = ref();
 		const state = reactive<TableDataState>({
 			isShowDialog: false,
-			activeName: '3', // 分类数据
+			activeName: '1', // 分类数据
 			activetab: 'attr', // 分类数据
 			detail: {},
 			developer_status: 0,