fix: 优化设备类型文字显示

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

@@ -1,43 +1,43 @@
 <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" label-width="100px">
-				<el-form-item label="产品标识" prop="key">
-					<el-input v-model="ruleForm.key" placeholder="请输入产品标识" :disabled="ruleForm.id" />
-				</el-form-item>
-				<el-form-item label="产品名称" prop="name">
-					<el-input v-model="ruleForm.name" placeholder="请输入产品名称" />
-				</el-form-item>
-				<el-form-item label="产品图片" prop="imageUrl">
-					<uploadVue :img="imageUrl" @set-img="handleAvatarSuccess"></uploadVue>
-				</el-form-item>
+  <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" label-width="100px">
+        <el-form-item label="产品标识" prop="key">
+          <el-input v-model="ruleForm.key" placeholder="请输入产品标识" :disabled="ruleForm.id" />
+        </el-form-item>
+        <el-form-item label="产品名称" prop="name">
+          <el-input v-model="ruleForm.name" placeholder="请输入产品名称" />
+        </el-form-item>
+        <el-form-item label="产品图片" prop="imageUrl">
+          <uploadVue :img="imageUrl" @set-img="handleAvatarSuccess"></uploadVue>
+        </el-form-item>
 
-				<el-form-item label="产品分类" prop="categoryId">
-					<el-cascader :options="cateData" :props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'name' }" placeholder="请选择分类" class="w" clearable v-model="ruleForm.categoryId">
-						<template #default="{ node, data }">
-							<span>{{ data.name }}</span>
-							<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
-						</template>
-					</el-cascader>
+        <el-form-item label="产品分类" prop="categoryId">
+          <el-cascader :options="cateData" :props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'name' }" placeholder="请选择分类" class="w" clearable v-model="ruleForm.categoryId">
+            <template #default="{ node, data }">
+              <span>{{ data.name }}</span>
+              <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
+            </template>
+          </el-cascader>
 
-					<!-- 添加产品分类 -->
-					<el-button type="success" @click="onOpenAddCategory()" style="margin-left: 5px;">添加产品分类</el-button>
-				</el-form-item>
+          <!-- 添加产品分类 -->
+          <el-button type="success" @click="onOpenAddCategory()" style="margin-left: 5px">添加产品分类</el-button>
+        </el-form-item>
 
-				<el-form-item label="消息协议" prop="messageProtocol">
-					<el-select v-model="ruleForm.messageProtocol" placeholder="请选择消息协议">
-						<el-option v-for="dict in messageData" :key="dict.types" :label="dict.title" :value="dict.name"> </el-option>
-						<!-- 增加系统默认的mqtt选项 -->
-						<el-option label="Sagoo Mqtt" value="SagooMqtt"> </el-option>
-					</el-select>
-				</el-form-item>
+        <el-form-item label="消息协议" prop="messageProtocol">
+          <el-select v-model="ruleForm.messageProtocol" placeholder="请选择消息协议">
+            <el-option v-for="dict in messageData" :key="dict.types" :label="dict.title" :value="dict.name"> </el-option>
+            <!-- 增加系统默认的mqtt选项 -->
+            <el-option label="Sagoo Mqtt" value="SagooMqtt"> </el-option>
+          </el-select>
+        </el-form-item>
 
-				<el-form-item label="接入方式" prop="transportProtocol">
-					<el-select v-model="ruleForm.transportProtocol" placeholder="请选择接入方式" @change="transportProtocolChange">
-						<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协议设备的认证
+        <el-form-item label="接入方式" prop="transportProtocol">
+          <el-select v-model="ruleForm.transportProtocol" placeholder="请选择接入方式" @change="transportProtocolChange">
+            <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方式：
@@ -46,312 +46,319 @@
 	选择这个方式的时候：页面出现 Aceess Token的输入框
 	2，TCP及其它协议认证
 	这些配合【网络组件】功能中涉及到的设备通讯协议认证的处理。如果涉及到证书的，需要调用【证书管理】功能维护的证书列表。 -->
-				<!-- 设备认证、网络组件服务增加认证方式authType（1=Basic，2=AccessToken，3=证书）
+        <!-- 设备认证、网络组件服务增加认证方式authType（1=Basic，2=AccessToken，3=证书）
 				涉及接口：产品添加、编辑、扩展信息更新；设备添加、编辑；网络组件服务添加、编辑 -->
-				<!-- 设备认证 -->
-				<template v-if="ruleForm.authType === 1 || ruleForm.authType === 2">
-					<el-form-item label="认证方式" prop="">
-						<el-radio-group v-model="ruleForm.authType">
-							<el-radio :label="1">Basic</el-radio>
-							<el-radio :label="2">AccessToken</el-radio>
-						</el-radio-group>
-					</el-form-item>
-					<template v-if="ruleForm.authType === 1">
-						<el-form-item label="用户名" prop="authUser">
-							<el-input v-model="ruleForm.authUser" placeholder="请输入用户名" />
-						</el-form-item>
-						<el-form-item label="密码" prop="authPasswd">
-							<el-input type="password" 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-if="ruleForm.authType === 3">
-					<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>
+        <!-- 设备认证 -->
+        <template v-if="ruleForm.authType === 1 || ruleForm.authType === 2">
+          <el-form-item label="认证方式" prop="">
+            <el-radio-group v-model="ruleForm.authType">
+              <el-radio :label="1">Basic</el-radio>
+              <el-radio :label="2">AccessToken</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <template v-if="ruleForm.authType === 1">
+            <el-form-item label="用户名" prop="authUser">
+              <el-input v-model="ruleForm.authUser" placeholder="请输入用户名" />
+            </el-form-item>
+            <el-form-item label="密码" prop="authPasswd">
+              <el-input type="password" 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-if="ruleForm.authType === 3">
+          <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-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 label="网关">网关设备</el-radio> -->
+            <el-radio label="子设备">子设备</el-radio>
           </el-radio-group>
-				</el-form-item>
-				<el-form-item label="产品描述	" prop="desc">
-					<el-input v-model="ruleForm.desc" type="textarea" placeholder="请输入产品描述"></el-input>
-				</el-form-item>
-			</el-form>
-			<template #footer>
-				<span class="dialog-footer">
-					<el-button @click="onCancel">取 消</el-button>
-					<el-button type="primary" @click="onSubmit" :loading="submitLoading">{{ ruleForm.id !== 0 ? '修 改' : '添 加' }}</el-button>
-				</span>
-			</template>
-		</el-dialog>
-		<EditCategory ref="editCategoryRef" @getCateList="getCategoryList" />
-	</div>
+        </el-form-item>
+        <el-form-item label="产品描述	" prop="desc">
+          <el-input v-model="ruleForm.desc" type="textarea" placeholder="请输入产品描述"></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="onCancel">取 消</el-button>
+          <el-button type="primary" @click="onSubmit" :loading="submitLoading">{{ ruleForm.id !== 0 ? "修 改" : "添 加" }}</el-button>
+        </span>
+      </template>
+    </el-dialog>
+    <EditCategory ref="editCategoryRef" @getCateList="getCategoryList" />
+  </div>
 </template>
 
 <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 { validateNoSpace } from '/@/utils/validator';
+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 { validateNoSpace } from "/@/utils/validator";
 
-import { ElMessage, UploadProps } from 'element-plus'
-import getOrigin from '/@/utils/origin'
+import { ElMessage, UploadProps } from "element-plus";
+import getOrigin from "/@/utils/origin";
 import EditCategory from "/@/views/iot/device/category/component/edit.vue";
 
 interface RuleFormState {
-	id: number
-	categoryId: number | string
-	messageProtocol: string
-	transportProtocol: string
-	deviceType: string
-	name: string
-	key: string
-	authType: number| null
-	status: number
-	desc: string
-	icon: string
-	authUser: string
-	authPasswd: string
-	accessToken: string
-	certificateId: string
+  id: number;
+  categoryId: number | string;
+  messageProtocol: string;
+  transportProtocol: string;
+  deviceType: string;
+  name: string;
+  key: string;
+  authType: number | null;
+  status: number;
+  desc: string;
+  icon: string;
+  authUser: string;
+  authPasswd: string;
+  accessToken: string;
+  certificateId: string;
 }
 interface DicState {
-	isShowDialog: boolean
-	ruleForm: RuleFormState
-	cateData: any[]
-	deptData: any[]
-	messageData: any[]
-	network_protocols: any[]
-	tranData: any[]
-	rules: {}
-	imageUrl: string
-	singleImg: string
+  isShowDialog: boolean;
+  ruleForm: RuleFormState;
+  cateData: any[];
+  deptData: any[];
+  messageData: any[];
+  network_protocols: any[];
+  tranData: any[];
+  rules: {};
+  imageUrl: string;
+  singleImg: string;
 }
 
 const form = {
-	id: 0,
-	name: '',
-	key: '',
-	categoryId: '',
-	messageProtocol: '',
-	transportProtocol: '',
-	deviceType: '设备',
-	status: 1,
-	desc: '',
-	icon: '',
-	authType: null,
-	authUser: '',
-	authPasswd: '',
-	accessToken: '',
-	certificateId: '',
-
-}
+  id: 0,
+  name: "",
+  key: "",
+  categoryId: "",
+  messageProtocol: "",
+  transportProtocol: "",
+  deviceType: "设备",
+  status: 1,
+  desc: "",
+  icon: "",
+  authType: null,
+  authUser: "",
+  authPasswd: "",
+  accessToken: "",
+  certificateId: "",
+};
 
 export default defineComponent({
-	name: 'deviceEditPro',
-	components: { EditCategory, uploadVue },
-	setup(prop, { emit }) {
-		const formRef = ref<HTMLElement | null>(null)
-		const baseURL: string | undefined | boolean = getOrigin()
+  name: "deviceEditPro",
+  components: { EditCategory, uploadVue },
+  setup(prop, { emit }) {
+    const formRef = ref<HTMLElement | null>(null);
+    const baseURL: string | undefined | boolean = getOrigin();
 
-		const { proxy } = getCurrentInstance() as any
-		const { network_server_type } = proxy.useDict('network_server_type')
+    const { proxy } = getCurrentInstance() as any;
+    const { network_server_type } = proxy.useDict("network_server_type");
 
-		const certList = ref<any[]>([])
-		const submitLoading = ref(false)
-		const editCategoryRef = ref();
+    const certList = ref<any[]>([]);
+    const submitLoading = ref(false);
+    const editCategoryRef = ref();
 
-		const state = reactive<DicState>({
-			isShowDialog: false,
-			cateData: [], // 分类数据
-			deptData: [], //
-			messageData: [], //
-			network_protocols: [], // 消息协议
-			tranData: [], //
-			imageUrl: '', //
-			singleImg: baseURL + '/product/icon/upload',
-			ruleForm: {
-				...form
-			},
-			rules: {
-				name: [
-					{ required: true, message: '产品名称不能为空', trigger: 'change' },
-					{ max: 32, message: '产品名称不能超过32个字符', trigger: 'change' },
-					{ validator: validateNoSpace, message: '产品名称不能包含空格', trigger: 'change' }
-				],
-				key: [
-					{ required: true, message: '产品标识不能为空', trigger: 'change' },
-					{ validator: validateNoSpace, message: '产品标识不能包含空格', trigger: 'change' }
-				],
-				messageProtocol: [{ required: true, message: '消息协议不能为空', trigger: 'change' }],
-				transportProtocol: [{ required: true, message: '接入方式不能为空', trigger: 'change' }],
-				categoryId: [{ required: true, message: '产品分类不能为空', trigger: 'change' }],
-				deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }],
-			},
-		})
+    const state = reactive<DicState>({
+      isShowDialog: false,
+      cateData: [], // 分类数据
+      deptData: [], //
+      messageData: [], //
+      network_protocols: [], // 消息协议
+      tranData: [], //
+      imageUrl: "", //
+      singleImg: baseURL + "/product/icon/upload",
+      ruleForm: {
+        ...form,
+      },
+      rules: {
+        name: [
+          { required: true, message: "产品名称不能为空", trigger: "change" },
+          { max: 32, message: "产品名称不能超过32个字符", trigger: "change" },
+          { validator: validateNoSpace, message: "产品名称不能包含空格", trigger: "change" },
+        ],
+        key: [
+          { required: true, message: "产品标识不能为空", trigger: "change" },
+          { validator: validateNoSpace, message: "产品标识不能包含空格", trigger: "change" },
+        ],
+        messageProtocol: [{ required: true, message: "消息协议不能为空", trigger: "change" }],
+        transportProtocol: [{ required: true, message: "接入方式不能为空", trigger: "change" }],
+        categoryId: [{ required: true, message: "产品分类不能为空", trigger: "change" }],
+        deviceType: [{ required: true, message: "设备类型不能为空", trigger: "change" }],
+      },
+    });
 
-		const handleAvatarSuccess: UploadProps['onSuccess'] = (response) => {
-			state.imageUrl = response
-			state.ruleForm.icon = response
-		}
+    const handleAvatarSuccess: UploadProps["onSuccess"] = (response) => {
+      state.imageUrl = response;
+      state.ruleForm.icon = response;
+    };
 
-		// 打开弹窗
-		const openDialog = (row?: any) => {
-			resetForm()
-			api.category.getList({ status: 1 }).then((res: any) => {
-				state.cateData = res.category || []
-			})
-			api.dept.getList({ status: -1 }).then((res: any) => {
-				state.deptData = res || []
-			})
-			api.product.getTypesAll({ types: 'protocol' }).then((res: any) => {
-				state.messageData = res || [];
-			});
+    // 打开弹窗
+    const openDialog = (row?: any) => {
+      resetForm();
+      api.category.getList({ status: 1 }).then((res: any) => {
+        state.cateData = res.category || [];
+      });
+      api.dept.getList({ status: -1 }).then((res: any) => {
+        state.deptData = res || [];
+      });
+      api.product.getTypesAll({ types: "protocol" }).then((res: any) => {
+        state.messageData = res || [];
+      });
 
-			// 证书列表
-			certApi.certificateManagement.getAll().then((res: any) => {
-				certList.value = res.Info || []
-			});
-			// api.product.trunsport_protocol_list({ status: -1 }).then((res: any) => {
-			//   state.tranData = res.data || [];
-			// });
-			if (row) {
-				// api.dict.getType(row.dictId).then((res:any)=>{
-				//   state.ruleForm = res.data.dictType
-				// }
-				state.imageUrl = row.icon
+      // 证书列表
+      certApi.certificateManagement.getAll().then((res: any) => {
+        certList.value = res.Info || [];
+      });
+      // api.product.trunsport_protocol_list({ status: -1 }).then((res: any) => {
+      //   state.tranData = res.data || [];
+      // });
+      if (row) {
+        // api.dict.getType(row.dictId).then((res:any)=>{
+        //   state.ruleForm = res.data.dictType
+        // }
+        state.imageUrl = row.icon;
 
-				state.ruleForm = row
-				if (row.authType === 0) {
-					transportProtocolChange(row.transportProtocol)
-				}
-			} else {
-				state.imageUrl = ""
-			}
-			state.isShowDialog = true
-		}
-		const resetForm = () => {
-			state.ruleForm = {
-				...form
-			}
-			const formWrap = unref(formRef) as any;
-			if (formWrap) {
-				formWrap.resetFields();
-			}
-		}
-		// 关闭弹窗
-		const closeDialog = () => {
-			resetForm();
+        state.ruleForm = row;
+        if (row.authType === 0) {
+          transportProtocolChange(row.transportProtocol);
+        }
+      } else {
+        state.imageUrl = "";
+      }
+      state.isShowDialog = true;
+    };
+    const resetForm = () => {
+      state.ruleForm = {
+        ...form,
+      };
+      const formWrap = unref(formRef) as any;
+      if (formWrap) {
+        formWrap.resetFields();
+      }
+    };
+    // 关闭弹窗
+    const closeDialog = () => {
+      resetForm();
 
-			state.isShowDialog = false
-		}
-		// 取消
-		const onCancel = () => {
-			closeDialog()
-		}
-		const transportProtocolChange = (type: string) => {
-			if (type === 'mqtt_server') {
-				state.ruleForm.authType = 1
-			} else {
-				state.ruleForm.authType = 3
-			}
-		}
-		// 新增
-		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 {
-						//添加
-						api.product.add(state.ruleForm).then(() => {
-							ElMessage.success('产品添加成功')
-							closeDialog() // 关闭弹窗
-							emit('typeList')
-						}).finally(() => submitLoading.value = false)
-					}
-				}
-			})
-		}
-		// 打开新增产品分类弹窗
-		const onOpenAddCategory = () => {
-			editCategoryRef.value.openDialog();
-		};
-		// 获取产品分类列表
-		const getCategoryList = () => {
-			api.category.getList({ status: 1 }).then((res: any) => {
-				state.cateData = res.category || []
-			})
-		}
+      state.isShowDialog = false;
+    };
+    // 取消
+    const onCancel = () => {
+      closeDialog();
+    };
+    const transportProtocolChange = (type: string) => {
+      if (type === "mqtt_server") {
+        state.ruleForm.authType = 1;
+      } else {
+        state.ruleForm.authType = 3;
+      }
+    };
+    // 新增
+    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 {
+            //添加
+            api.product
+              .add(state.ruleForm)
+              .then(() => {
+                ElMessage.success("产品添加成功");
+                closeDialog(); // 关闭弹窗
+                emit("typeList");
+              })
+              .finally(() => (submitLoading.value = false));
+          }
+        }
+      });
+    };
+    // 打开新增产品分类弹窗
+    const onOpenAddCategory = () => {
+      editCategoryRef.value.openDialog();
+    };
+    // 获取产品分类列表
+    const getCategoryList = () => {
+      api.category.getList({ status: 1 }).then((res: any) => {
+        state.cateData = res.category || [];
+      });
+    };
 
-		return {
-			transportProtocolChange,
-			submitLoading,
-			certList,
-			openDialog,
-			onOpenAddCategory,
-			handleAvatarSuccess,
-			closeDialog,
-			onCancel,
-			onSubmit,
-			network_server_type,
-			getCategoryList,
-			formRef,
-			editCategoryRef,
-			...toRefs(state),
-		}
-	},
-})
+    return {
+      transportProtocolChange,
+      submitLoading,
+      certList,
+      openDialog,
+      onOpenAddCategory,
+      handleAvatarSuccess,
+      closeDialog,
+      onCancel,
+      onSubmit,
+      network_server_type,
+      getCategoryList,
+      formRef,
+      editCategoryRef,
+      ...toRefs(state),
+    };
+  },
+});
 </script>
 
 <style scoped>
 .avatar-uploader .avatar {
-	width: 178px;
-	height: 178px;
-	display: block;
+  width: 178px;
+  height: 178px;
+  display: block;
 }
 </style>
 
 <style scoped>
 .avatar-uploader .el-upload {
-	border: 1px dashed var(--el-border-color);
-	border-radius: 6px;
-	cursor: pointer;
-	position: relative;
-	overflow: hidden;
-	transition: var(--el-transition-duration-fast);
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
 }
 
 .avatar-uploader .el-upload:hover {
-	border-color: var(--el-color-primary);
+  border-color: var(--el-color-primary);
 }
 
 .el-icon.avatar-uploader-icon {
-	font-size: 28px;
-	color: #8c939d;
-	width: 178px;
-	height: 178px;
-	text-align: center;
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  text-align: center;
 }
 </style>

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

@@ -5,22 +5,24 @@
         <el-form-item label="名称" prop="name">
           <el-input v-model="tableData.param.name" placeholder="输入名称或标识" clearable style="width: 150px" @keyup.enter.native="typeList" />
         </el-form-item>
-        <el-form-item label="类型" prop="deviceType" style="width: 180px;">
-          <el-select v-model="tableData.param.deviceType" placeholder="类型" clearable style="width: 240px" @keyup.enter.native="typeList" >
-            <el-option label="直连设备" :value="'设备'" />
-            <el-option label="网关设备" :value="'网关'" />
+        <el-form-item label="类型" prop="deviceType" style="width: 180px">
+          <el-select v-model="tableData.param.deviceType" placeholder="类型" clearable style="width: 240px" @keyup.enter.native="typeList">
+            <el-option label="设备" :value="'设备'" />
+            <el-option label="设备" :value="'网关'" />
+            <!-- <el-option label="直连设备" :value="'设备'" />
+            <el-option label="网关设备" :value="'网关'" /> -->
             <el-option label="子设备" :value="'子设备'" />
           </el-select>
         </el-form-item>
-        <el-form-item label="状态" prop="status" style="width: 180px;">
+        <el-form-item label="状态" prop="status" style="width: 180px">
           <el-select v-model="tableData.param.status" placeholder="启用状态" clearable style="width: 240px">
             <el-option label="已启用" :value="1" />
             <el-option label="未启用" :value="0" />
           </el-select>
         </el-form-item>
-<!--        <el-form-item label="创建时间" prop="dateRange">-->
-<!--          <el-date-picker v-model="tableData.param.dateRange" 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 label="创建时间" prop="dateRange">-->
+        <!--          <el-date-picker v-model="tableData.param.dateRange" 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 type="primary" class="ml10" @click="typeList">
             <el-icon>
@@ -55,7 +57,7 @@
         </el-table-column>
         <el-table-column label="名称" prop="name" min-width="160" show-overflow-tooltip v-col="'name'" />
         <el-table-column label="分类" prop="categoryName" align="center" width="140" show-overflow-tooltip v-col="'categoryName'" />
-<!--        <el-table-column label="消息协议" prop="messageProtocol" align="center" min-width="150" show-overflow-tooltip v-col="'messageProtocol'" />-->
+        <!--        <el-table-column label="消息协议" prop="messageProtocol" align="center" min-width="150" show-overflow-tooltip v-col="'messageProtocol'" />-->
         <el-table-column label="接入方式" prop="transportProtocol" min-width="120" align="center" show-overflow-tooltip v-col="'transportProtocol'" />
         <el-table-column label="类型" prop="deviceType" min-width="90" align="center" show-overflow-tooltip v-col="'deviceType'" />
         <el-table-column prop="status" label="状态" min-width="90" align="center" v-col="'status'">
@@ -66,10 +68,10 @@
         </el-table-column>
         <el-table-column label="操作" width="150" align="center" fixed="right">
           <template #default="scope">
-            <router-link :to="'/iotmanager/device/product/detail/' + scope.row.key" class="link-type" style="padding-right: 12px;font-size: 12px;color: #409eff;">
+            <router-link :to="'/iotmanager/device/product/detail/' + scope.row.key" class="link-type" style="padding-right: 12px; font-size: 12px; color: #409eff">
               <span>详情</span>
             </router-link>
-            <router-link :to="{path: '/iotmanager/device/instance', query: { productKey: scope.row.key }}"  class="link-type" style="padding-right: 12px;font-size: 12px;color: #409eff;">设备管理</router-link>
+            <router-link :to="{ path: '/iotmanager/device/instance', query: { productKey: scope.row.key } }" class="link-type" style="padding-right: 12px; font-size: 12px; color: #409eff">设备管理</router-link>
             <!--            <el-button size="small" text type="warning" @click="onOpenEditDic(scope.row)" v-auth="'edit'">修改</el-button>-->
             <el-button size="small" text type="info" @click="onRowDel(scope.row)" v-auth="'del'">删除</el-button>
           </template>
@@ -82,10 +84,10 @@
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
-import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
-import EditDic from './component/editPro.vue';
-import api from '/@/api/device';
+import { toRefs, reactive, onMounted, ref, defineComponent } from "vue";
+import { ElMessageBox, ElMessage, FormInstance } from "element-plus";
+import EditDic from "./component/editPro.vue";
+import api from "/@/api/device";
 
 // 定义接口来定义对象的类型
 interface TableDataRow {
@@ -115,7 +117,7 @@ interface TableDataState {
 }
 
 export default defineComponent({
-  name: 'deviceproduct',
+  name: "deviceproduct",
   components: { EditDic },
   setup() {
     const addDicRef = ref();
@@ -130,9 +132,9 @@ export default defineComponent({
         param: {
           pageNum: 1,
           pageSize: 20,
-          status: '',
-          name: '',
-          deviceType: '',
+          status: "",
+          name: "",
+          deviceType: "",
           dateRange: [],
         },
       },
@@ -143,10 +145,13 @@ export default defineComponent({
     };
     const typeList = () => {
       state.tableData.loading = true;
-      api.product.getList(state.tableData.param).then((res: any) => {
-        state.tableData.data = res.product;
-        state.tableData.total = res.total;
-      }).finally(() => (state.tableData.loading = false));
+      api.product
+        .getList(state.tableData.param)
+        .then((res: any) => {
+          state.tableData.data = res.product;
+          state.tableData.total = res.total;
+        })
+        .finally(() => (state.tableData.loading = false));
     };
     // 打开新增产品弹窗
     const onOpenAddDic = () => {
@@ -158,7 +163,7 @@ export default defineComponent({
     };
     // 删除产品
     const onRowDel = (row?: TableDataRow) => {
-      let msg = '你确定要删除所选数据？';
+      let msg = "你确定要删除所选数据？";
       let keys: string[] = [];
       if (row) {
         msg = `此操作将永久删除产品：“${row.name}”，是否继续?`;
@@ -167,21 +172,21 @@ export default defineComponent({
         keys = state.keys;
       }
       if (keys.length === 0) {
-        ElMessage.error('请选择要删除的数据。');
+        ElMessage.error("请选择要删除的数据。");
         return;
       }
-      ElMessageBox.confirm(msg, '提示', {
-        confirmButtonText: '确认',
-        cancelButtonText: '取消',
-        type: 'warning',
+      ElMessageBox.confirm(msg, "提示", {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: "warning",
       })
         .then(() => {
           api.product.delete(keys).then(() => {
-            ElMessage.success('删除成功');
+            ElMessage.success("删除成功");
             typeList();
           });
         })
-        .catch(() => { });
+        .catch(() => {});
     };
     // 页面加载时
     onMounted(() => {