feat: 设备管理-产品-详情：删除弹窗和后续操作支持多语言

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

@@ -248,9 +248,9 @@
 	</div>
 </template>
 <script lang="ts" setup>
-import { toRefs, reactive, onMounted, ref, defineComponent, computed } from 'vue';
+import { onMounted, ref, computed } from 'vue';
 import { Edit } from '@element-plus/icons-vue';
-import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
+import { ElMessageBox, ElMessage } from 'element-plus';
 import downloadFile from '/@/utils/download';
 import getOrigin from '/@/utils/origin';
 import { useI18n } from 'vue-i18n';
@@ -267,316 +267,258 @@ import { useRoute } from 'vue-router';
 
 import api from '/@/api/device';
 
-const { locale } = useI18n();
+const { locale, t } = useI18n();
 
 const currentLang = computed(() => locale.value);
 
-// interface TableDataState {
-// 	isShowDialog: boolean;
-// 	detail: any;
-// 	developer_status: number;
-// 	activeName: string;
-// 	activetab: string;
-// 	tableData: {
-// 		data: [];
-// 		total: number;
-// 		loading: boolean;
-// 		param: {
-// 			pageNum: number;
-// 			pageSize: number;
-// 			name: string;
-// 			productKey: string | string[];
-// 			deviceType: string;
-// 			status: string;
-// 			dateRange: string[];
-// 		} | any;
-// 	};
-// }
-// export default defineComponent({
-// 	name: 'deviceEditPro',
-// 	components: { EditDic, EditAttr, EditFun, EditEvent, EditTab, deviceIn, dataParse },
-
-// 	setup(prop, context) {
-
-		const uploadUrl: string = getOrigin("/product/tsl/import");
-		const headers = {
-			Authorization: 'Bearer ' + getToken(),
-		};
-		const route = useRoute();
-		const editDicRef = ref();
-		const editAttrRef = ref();
-		const editFunRef = ref();
-		const editEventRef = ref();
-		const editTabRef = ref();
-		const activeName = ref('1');// 分类数据
-		const activetab = ref('attr');// 分类数据
-		const detail = ref<any>({});
-		const developer_status = ref(0);
-		const tableData = ref({
-			data: [],
-			total: 0,
-			loading: false,
-			param: {
-				pageNum: 1,
-				productKey: route.params?.id,
-				pageSize: 20,
-				status: '',
-				dateRange: [],
-			},
-		});
-
-		onMounted(() => {
-			productDetail()
-			//第一次加载
-			api.model.property(tableData.value.param).then((res: any) => {
-				tableData.value.data = res.Data;
-				tableData.value.total = res.Total;
-			});
-		});
-		function productDetail() {
-			const productKey = route.params?.id;
-			api.product.detail(productKey).then((res: any) => {
-				detail.value = res.data;
-				developer_status.value = res.data.status
-			});
-		}
-
-
-		//编辑属性
-		const onEditAttr = (row: any) => {
-			editAttrRef.value.openDialog(row, route.params.id);
-		};
-
-		//编辑功能
-		const onEditFun = (row: any) => {
-			editFunRef.value.openDialog(row, route.params.id);
-		}
-
-
-		//编辑事件
-		const onEditEvent = (row: any) => {
-			editEventRef.value.openDialog(row, route.params.id);
-		}
-
-		//编辑标签
-		const onEditTag = (row: any) => {
-			editTabRef.value.openDialog(row, route.params.id);
-		}
-
-		//打开添加属性弹窗
-		const onOpenEditAttr = () => {
-			editAttrRef.value.openDialog({ productKey: route.params.id, id: 0, accessMode: 1 });
-		};
-
-		//打开添加功能弹窗
-		const onOpenEditFun = () => {
-			editFunRef.value.openDialog({ productKey: route.params.id, id: 0 });
-		};
-		//打开添加事件弹窗
-		const onOpenEditEvent = () => {
-			editEventRef.value.openDialog({ productKey: route.params.id, id: 0, level: 0 });
-		};
-
-		//打开添加事件弹窗
-		const onOpenEditTab = () => {
-			editTabRef.value.openDialog({ productKey: route.params.id, id: 0, accessMode: 1 });
-		};
-
-		// 打开修改产品弹窗
-		const onOpenEditDic = (row: any) => {
-			editDicRef.value.openDialog(row);
-		};
-
-
-		// 删除产品
-		const onRowDel = (key: string, type: string) => {
-			let msg = `此操作将永久删除该数据，是否继续?`;
-
-			if (key.length === 0) {
-				ElMessage.error('请选择要删除的数据。');
-				return;
-			}
-			ElMessageBox.confirm(msg, '提示', {
-				confirmButtonText: '确认',
-				cancelButtonText: '取消',
-				type: 'warning',
-			})
-				.then(() => {
-					const productKey = route.params?.id as string
-					if (type == 'attr') {
-						api.model.propertydel(productKey, key).then(() => {
-							ElMessage.success('删除成功');
-							getproperty();
-						});
-					}
-					if (type == 'fun') {
-						api.model.functiondel(productKey, key).then(() => {
-							ElMessage.success('删除成功');
-							getfunction();
-						});
-					}
-					if (type == 'event') {
-						api.model.eventdel(productKey, key).then(() => {
-							ElMessage.success('删除成功');
-							getevent();
-						});
-					}
-					if (type == 'tab') {
-						api.model.tagdel(productKey, key).then(() => {
-							ElMessage.success('删除成功');
-							gettab();
-						});
-					}
-				})
-				.catch(() => { });
-		};
-
-
-		//根据不同类型获取列表
-		const getList = () => {
-			switch (activetab.value) {
-				case 'attr':
+
+const uploadUrl: string = getOrigin("/product/tsl/import");
+const headers = {
+	Authorization: 'Bearer ' + getToken(),
+};
+const route = useRoute();
+const editDicRef = ref();
+const editAttrRef = ref();
+const editFunRef = ref();
+const editEventRef = ref();
+const editTabRef = ref();
+const activeName = ref('1');// 分类数据
+const activetab = ref('attr');// 分类数据
+const detail = ref<any>({});
+const developer_status = ref(0);
+const tableData = ref({
+	data: [],
+	total: 0,
+	loading: false,
+	param: {
+		pageNum: 1,
+		productKey: route.params?.id,
+		pageSize: 20,
+		status: '',
+		dateRange: [],
+	},
+});
+
+onMounted(() => {
+	productDetail()
+	//第一次加载
+	api.model.property(tableData.value.param).then((res: any) => {
+		tableData.value.data = res.Data;
+		tableData.value.total = res.Total;
+	});
+});
+const productDetail = () => {
+	const productKey = route.params?.id;
+	api.product.detail(productKey).then((res: any) => {
+		detail.value = res.data;
+		developer_status.value = res.data.status
+	});
+}
+
+
+//编辑属性
+const onEditAttr = (row: any) => {
+	editAttrRef.value.openDialog(row, route.params.id);
+};
+
+//编辑功能
+const onEditFun = (row: any) => {
+	editFunRef.value.openDialog(row, route.params.id);
+}
+
+
+//编辑事件
+const onEditEvent = (row: any) => {
+	editEventRef.value.openDialog(row, route.params.id);
+}
+
+//编辑标签
+const onEditTag = (row: any) => {
+	editTabRef.value.openDialog(row, route.params.id);
+}
+
+//打开添加属性弹窗
+const onOpenEditAttr = () => {
+	editAttrRef.value.openDialog({ productKey: route.params.id, id: 0, accessMode: 1 });
+};
+
+//打开添加功能弹窗
+const onOpenEditFun = () => {
+	editFunRef.value.openDialog({ productKey: route.params.id, id: 0 });
+};
+//打开添加事件弹窗
+const onOpenEditEvent = () => {
+	editEventRef.value.openDialog({ productKey: route.params.id, id: 0, level: 0 });
+};
+
+//打开添加事件弹窗
+const onOpenEditTab = () => {
+	editTabRef.value.openDialog({ productKey: route.params.id, id: 0, accessMode: 1 });
+};
+
+// 打开修改产品弹窗
+const onOpenEditDic = (row: any) => {
+	editDicRef.value.openDialog(row);
+};
+
+
+// 删除产品
+const onRowDel = (key: string, type: string) => {
+	// `此操作将永久删除该数据，是否继续?` 
+	let msg = t('message.device.tableI18nConfirm.deleteMessage');
+
+	if (key.length === 0) {
+		// 请选择要删除的数据。
+		ElMessage.error(t('message.device.tableI18nConfirm.selectMessage'));
+		return;
+	}
+	ElMessageBox.confirm(msg, t('message.tableI18nConfirm.deleteTitle'), {
+		confirmButtonText: t('message.tableI18nConfirm.confirmText'),
+		cancelButtonText: t('message.tableI18nConfirm.cancelText'),
+		type: 'warning',
+	})
+		.then(() => {
+			const productKey = route.params?.id as string
+			if (type == 'attr') {
+				api.model.propertydel(productKey, key).then(() => {
+					// 删除成功
+					ElMessage.success(t('message.tableI18nConfirm.deleteSuccess'));
 					getproperty();
-					break;
-				case 'fun':
-					getfunction();
-					break;
-				case 'event':
-					getevent();
-					break;
-				case 'tab':
-					gettab();
-					break;
+				});
 			}
-		};
-
-		const getproperty = () => {
-			api.model.property(tableData.value.param).then((res: any) => {
-				tableData.value.data = res.Data;
-				tableData.value.total = res.Total;
-			});
-		};
-
-		const getfunction = () => {
-			api.model.function(tableData.value.param).then((res: any) => {
-				tableData.value.data = res.Data;
-				tableData.value.total = res.Total;
-			});
-		};
-		const getevent = () => {
-			api.model.event(tableData.value.param).then((res: any) => {
-				tableData.value.data = res.Data;
-				tableData.value.total = res.Total;
-			});
-		};
-
-		const gettab = () => {
-			api.model.tag(tableData.value.param).then((res: any) => {
-				tableData.value.data = res.Data;
-				tableData.value.total = res.Total;
-			});
-		};
-
-		const wuhandleClick = (tab: any) => {
-			activetab.value = tab.props.name;
-			switch (tab.props.name) {
-				case 'attr':
-					getproperty();
-					break;
-				case 'fun':
+			if (type == 'fun') {
+				api.model.functiondel(productKey, key).then(() => {
+					// 删除成功
+					ElMessage.success(t('message.tableI18nConfirm.deleteSuccess'));
 					getfunction();
-					break;
-				case 'event':
-					getevent();
-					break;
-				case 'tab':
-					gettab();
-					break;
+				});
 			}
-		};
-
-		const handleClick = (tab: any, event: Event) => {
-		};
-
-		const updateScript = (scriptInfo: string) => {
-			detail.value.scriptInfo = scriptInfo
-		};
-
-		const CkOption = (developerStatus: number) => {
-			if (developerStatus == 0) {
-				api.product.undeploy(route.params.id).then((res: any) => {
-					ElMessage.success('操作成功');
-					developer_status.value = 0;
-				}).catch(() => developer_status.value = 1)
-			} else {
-				api.product.deploy(route.params.id).then((res: any) => {
-					ElMessage.success('操作成功');
-					developer_status.value = 1;
-				}).catch(() => developer_status.value = 0)
+			if (type == 'event') {
+				api.model.eventdel(productKey, key).then(() => {
+					ElMessage.success(t('message.tableI18nConfirm.deleteSuccess'));
+					getevent();
+				});
 			}
-		}
-
-		// 导出
-		const onRowExport = () => {
-
-			api.product.export({ productKey: detail.value.key }).then((res: any) => downloadFile(res, "TSL-" + detail.value.key + "-" + getCurrentTime() + ".json"))
-		};
-
-
-		const getCurrentTime = () => {
-			const date = new Date();
-			const year = date.getFullYear().toString();
-			const month = (date.getMonth() + 1).toString().padStart(2, '0');
-			const day = date.getDate().toString().padStart(2, '0');
-			const hours = date.getHours().toString().padStart(2, '0');
-			const minutes = date.getMinutes().toString().padStart(2, '0');
-			return year + month + day + hours + minutes;
-		}
-		const updateImg = (res: any) => {
-			if (res.code === 0) {
-				getList();
-				ElMessage.success('物模型导入成功');
-			} else {
-				ElMessage.error(res.message);
+			if (type == 'tab') {
+				api.model.tagdel(productKey, key).then(() => {
+					ElMessage.success(t('message.tableI18nConfirm.deleteSuccess'));
+					gettab();
+				});
 			}
-		};
-
-// 		return {
-// 			updateImg,
-// 			headers,
-// 			uploadUrl,
-// 			getCurrentTime,
-// 			onRowExport,
-// 			Edit,
-// 			updateScript,
-// 			editDicRef,
-// 			editAttrRef,
-// 			editFunRef,
-// 			editEventRef,
-// 			editTabRef,
-// 			CkOption,
-// 			onRowDel,
-// 			onEditFun,
-// 			onEditEvent,
-// 			onEditTag,
-// 			onEditAttr,
-// 			getList,
-// 			getproperty,
-// 			getfunction,
-// 			getevent,
-// 			gettab,
-// 			wuhandleClick,
-// 			onOpenEditTab,
-// 			onOpenEditEvent,
-// 			productDetail,
-// 			onOpenEditAttr,
-// 			onOpenEditFun,
-// 			onOpenEditDic,
-// 			handleClick,
-// 			...toRefs(state),
-// 		};
-// 	},
-// });
+		})
+		.catch(() => { });
+};
+
+
+//根据不同类型获取列表
+const getList = () => {
+	switch (activetab.value) {
+		case 'attr':
+			getproperty();
+			break;
+		case 'fun':
+			getfunction();
+			break;
+		case 'event':
+			getevent();
+			break;
+		case 'tab':
+			gettab();
+			break;
+	}
+};
+
+const getproperty = () => {
+	api.model.property(tableData.value.param).then((res: any) => {
+		tableData.value.data = res.Data;
+		tableData.value.total = res.Total;
+	});
+};
+
+const getfunction = () => {
+	api.model.function(tableData.value.param).then((res: any) => {
+		tableData.value.data = res.Data;
+		tableData.value.total = res.Total;
+	});
+};
+const getevent = () => {
+	api.model.event(tableData.value.param).then((res: any) => {
+		tableData.value.data = res.Data;
+		tableData.value.total = res.Total;
+	});
+};
+
+const gettab = () => {
+	api.model.tag(tableData.value.param).then((res: any) => {
+		tableData.value.data = res.Data;
+		tableData.value.total = res.Total;
+	});
+};
+
+const wuhandleClick = (tab: any) => {
+	activetab.value = tab.props.name;
+	switch (tab.props.name) {
+		case 'attr':
+			getproperty();
+			break;
+		case 'fun':
+			getfunction();
+			break;
+		case 'event':
+			getevent();
+			break;
+		case 'tab':
+			gettab();
+			break;
+	}
+};
+
+const handleClick = (tab: any, event: Event) => {};
+
+const updateScript = (scriptInfo: string) => {
+	detail.value.scriptInfo = scriptInfo
+};
+
+const CkOption = (developerStatus: number) => {
+	if (developerStatus == 0) {
+		api.product.undeploy(route.params.id).then(() => {
+			// 操作成功
+			ElMessage.success(t('message.device.productDetail.operationSuccess'));
+			developer_status.value = 0;
+		}).catch(() => developer_status.value = 1)
+	} else {
+		api.product.deploy(route.params.id).then(() => {
+			// 操作成功
+			ElMessage.success(t('message.device.productDetail.operationSuccess'));
+			developer_status.value = 1;
+		}).catch(() => developer_status.value = 0)
+	}
+}
+
+// 导出
+const onRowExport = () => {
+	api.product.export({ productKey: detail.value.key }).then((res: any) => downloadFile(res, "TSL-" + detail.value.key + "-" + getCurrentTime() + ".json"))
+};
+
+
+const getCurrentTime = () => {
+	const date = new Date();
+	const year = date.getFullYear().toString();
+	const month = (date.getMonth() + 1).toString().padStart(2, '0');
+	const day = date.getDate().toString().padStart(2, '0');
+	const hours = date.getHours().toString().padStart(2, '0');
+	const minutes = date.getMinutes().toString().padStart(2, '0');
+	return year + month + day + hours + minutes;
+}
+const updateImg = (res: any) => {
+	if (res.code === 0) {
+		getList();
+		// 物模型导入成功
+		ElMessage.success(t('message.device.productDetail.modelImportSuccess'));
+	} else {
+		ElMessage.error(res.message);
+	}
+};
 </script>
 <style scoped>
 .import {