浏览代码

8号修复的bug

yukai 1 年之前
父节点
当前提交
2dcebbdd06

+ 36 - 19
src/views/iot/device/category/component/edit.vue

@@ -38,7 +38,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 ? '修 改' : '添 加' }}</el-button>
+					<el-button type="primary" @click="onSubmit" size="default"  :loading="loading">{{ ruleForm.id ? '修 改' : '添 加' }}</el-button>
 				</span>
 			</template>
 		</el-dialog>
@@ -79,6 +79,7 @@ export default defineComponent({
 	name: 'deviceEditCate',
 	setup(prop, { emit }) {
 		const formRef = ref<HTMLElement | null>(null);
+	    const loading = ref(false); // 添加loading状态
 		const state = reactive<DeptSate>({
 			isShowDialog: false,
 			ruleForm: {
@@ -119,35 +120,51 @@ export default defineComponent({
 		const onSubmit = () => {
 			const formWrap = unref(formRef) as any;
 			if (!formWrap) return;
-			formWrap.validate((valid: boolean) => {
+			formWrap.validate(async (valid: boolean) => {
 				if (valid) {
-					if (!state.ruleForm.parentId) {
-						state.ruleForm.parentId = 0;
+				// 禁用按钮
+				loading.value = true;
+				if (!state.ruleForm.parentId) {
+					state.ruleForm.parentId = 0;
+				}
+				if (!state.ruleForm.id) {
+					//添加
+					try {
+					// 等待提交完成
+					await api.category.add(state.ruleForm);
+					ElMessage.success('分类添加成功');
+					closeDialog(); // 关闭弹窗
+					emit('getCateList');
+					} catch (error) {
+					ElMessage.error('分类添加失败');
 					}
-					if (!state.ruleForm.id) {
-						//添加
-						api.category.add(state.ruleForm).then(() => {
-							ElMessage.success('分类添加成功');
-							closeDialog(); // 关闭弹窗
-							emit('getCateList');
-						});
-					} else {
-						//修改
-						api.category.edit(state.ruleForm).then(() => {
-							ElMessage.success('分类修改成功');
-							closeDialog(); // 关闭弹窗
-							emit('getCateList');
-						});
+				} else {
+					//修改
+					try {
+					// 等待提交完成
+					await api.category.edit(state.ruleForm);
+					ElMessage.success('分类修改成功');
+					closeDialog(); // 关闭弹窗
+					emit('getCateList');
+					} catch (error) {
+					ElMessage.error('分类修改失败');
 					}
 				}
+				// 启用按钮
+				loading.value = false;
+				} else {
+				// 表单验证失败时,启用按钮
+				loading.value = false;
+				}
 			});
-		};
+			};
 		const resetForm = () => {
 			state.ruleForm = {
 				...baseForm,
 			};
 		};
 		return {
+			loading,
 			openDialog,
 			closeDialog,
 			onCancel,

+ 1 - 1
src/views/iot/device/category/index.vue

@@ -4,7 +4,7 @@
       <div class="system-dept-search mb15">
         <el-form :inline="true">
           <el-form-item label="分类名称">
-            <el-input size="default" v-model="tableData.param.name" placeholder="请输入分类名称" class="w-50" clearable />
+            <el-input size="default" v-model="tableData.param.name" placeholder="请输入分类名称"  @keyup.enter.native="getCateList"  class="w-50" clearable />
           </el-form-item>
           <el-form-item>
             <el-button size="default" type="primary" class="ml10" @click="getCateList">

+ 5 - 5
src/views/iot/device/product/component/editPro.vue

@@ -29,8 +29,8 @@
 					</el-select>
 				</el-form-item>
 
-				<el-form-item label="传输协议" prop="transportProtocol">
-					<el-select v-model="ruleForm.transportProtocol" placeholder="请选择传输协议" @change="transportProtocolChange">
+				<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>
@@ -182,7 +182,7 @@ export default defineComponent({
 				key: [{ required: true, message: '产品标识不能为空', trigger: 'change' },
 					{ validator: validateNoSpace, message: '产品标识不能包含空格', trigger: 'change' }],
 				messageProtocol: [{ required: true, message: '消息协议不能为空', trigger: 'change' }],
-				transportProtocol: [{ required: true, message: '传输协议不能为空', trigger: 'change' }],
+				transportProtocol: [{ required: true, message: '接入方式不能为空', trigger: 'change' }],
 				categoryId: [{ required: true, message: '产品分类不能为空', trigger: 'change' }],
 				deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }],
 			},
@@ -264,14 +264,14 @@ export default defineComponent({
 					if (state.ruleForm.id !== 0) {
 						//修改
 						api.product.edit(state.ruleForm).then(() => {
-							ElMessage.success('产品类型修改成功')
+							ElMessage.success('产品修改成功')
 							closeDialog() // 关闭弹窗
 							emit('typeList')
 						}).finally(() => submitLoading.value = false)
 					} else {
 						//添加
 						api.product.add(state.ruleForm).then(() => {
-							ElMessage.success('产品类型添加成功')
+							ElMessage.success('产品添加成功')
 							closeDialog() // 关闭弹窗
 							emit('typeList')
 						}).finally(() => submitLoading.value = false)

+ 3 - 1
src/views/iot/device/product/detail.vue

@@ -25,7 +25,7 @@
 								<tr class="ant-descriptions-row">
 									<th class="ant-descriptions-item-label ant-descriptions-item-colon">产品标识</th>
 									<td class="ant-descriptions-item-content" colspan="1">{{ detail.key }}</td>
-									<th class="ant-descriptions-item-label ant-descriptions-item-colon">所属品类</th>
+									<th class="ant-descriptions-item-label ant-descriptions-item-colon">产品分类</th>
 									<td class="ant-descriptions-item-content" colspan="1">{{ detail.categoryName }}</td>
 									<!-- <th class="ant-descriptions-item-label ant-descriptions-item-colon">所属组织</th>
 									<td class="ant-descriptions-item-content" colspan="1">{{ detail.deptName }}</td> -->
@@ -33,6 +33,8 @@
 									<td class="ant-descriptions-item-content" colspan="1">{{ detail.deviceType }}</td>
 								</tr> 
 								<tr class="ant-descriptions-row">
+									<th class="ant-descriptions-item-label ant-descriptions-item-colon">产品图片</th>
+									<td class="ant-descriptions-item-content" colspan="1"><img :src="detail.icon" style="height: 80px;width: 80px;"></td>
 									<th class="ant-descriptions-item-label ant-descriptions-item-colon">消息协议</th>
 									<td class="ant-descriptions-item-content" colspan="1">{{ detail.messageProtocol }}</td>
 									<th class="ant-descriptions-item-label ant-descriptions-item-colon">接入方式</th>