1

src/api/device/index.ts

@@ -34,10 +34,20 @@ export default {
   model: {
     property: (params: object) => get('/product/tsl/property/list', params),
     propertyadd: (data: object) => post('/product/tsl/property/add', data),
+    propertydel: (productId: number,key:string) => del('/product/property/del', { productId,key }),
 
     function: (params: object) => get('/product/tsl/function/list', params),
+    functionadd: (data: object) => post('/product/tsl/function/add', data),
+    functiondel: (productId: number,key:string) => del('/product/function/del', { productId,key }),
+
+
     event: (params: object) => get('/product/tsl/event/list', params),
+    eventadd: (data: object) => post('/product/tsl/event/add', data),
+    eventdel: (productId: number,key:string) => del('/product/event/del', { productId,key }),
+
     tag: (params: object) => get('/product/tsl/tag/list', params),
+    tagadd: (data: object) => post('/product/tsl/tag/add', data),
+    tagdel: (productId: number,key:string) => del('/product/tag/del', { productId,key }),
   },
   
   

src/views/device/product/component/editEvent.vue

@@ -1,63 +1,68 @@
 <template>
 	<div class="system-edit-dic-container">
-		<el-dialog :title="(ruleForm.id!==0?'修改':'添加')+'事件定义'" v-model="isShowDialog" width="769px">
+		<el-dialog :title="(ruleForm.id !== 0 ? '修改' : '添加') + '事件定义'" v-model="isShowDialog" width="769px">
 			<el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="120px">
-        <el-form-item label="事件定义标识" prop="key">
-          <el-input v-model="ruleForm.key" placeholder="请输入事件定义标识" />
-        </el-form-item>
-        <el-form-item label="事件定义名称" prop="name">
-          <el-input v-model="ruleForm.name" placeholder="请输入事件定义名称" />
-        </el-form-item>
-    
-    
-
-
-           
-         <el-form-item label="数据类型" prop="valueType">
-
-             <!--    <el-select v-model="ruleForm.valueType" placeholder="请选择数据类型">
-              <el-option
-                v-for="item in typeData"
-                :key="item.key"
-                :label="item.name"
-                :value="item.key"
-              />
-            </el-select> -->
-
-             <el-select v-model="ruleForm.valueType" placeholder="请选择数据类型">
-              <el-option-group
-                v-for="group in typeData"
-                :key="group"
-                :label="group"
-              >
-                <el-option
-                  v-for="item in group.options"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </el-option-group>
-            </el-select>
-            </el-form-item> 
-
-          
-
-      
-        <el-form-item label="是否只读" prop="accessMode">
-          <el-radio-group v-model="ruleForm.accessMode" model-value="0">
-            <el-radio label="0">读写</el-radio>
-
-            <el-radio label="1">只读</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-item label="事件定义标识" prop="key">
+					<el-input v-model="ruleForm.key" placeholder="请输入事件定义标识" />
+				</el-form-item>
+				<el-form-item label="事件定义名称" prop="name">
+					<el-input v-model="ruleForm.name" placeholder="请输入事件定义名称" />
+				</el-form-item>
+
+        
+				<el-form-item label="事件级别" prop="level">
+					<el-radio-group v-model="ruleForm.level" model-value="0">
+						<el-radio label="0">普通</el-radio>
+
+						<el-radio label="1">警告</el-radio>
+						<el-radio label="2">紧急</el-radio>
+					</el-radio-group>
+				</el-form-item>
+
+				<el-form-item label="输出参数" prop="type">
+					<el-select v-model="valueType.type" placeholder="请选择输出参数" @change="seletChange">
+						<el-option-group v-for="group in typeData" :key="group.label" :label="group.label">
+							<el-option v-for="item in group.options" :key="item.type" :label="item.title" :value="item.type" />
+						</el-option-group>
+					</el-select>
+				</el-form-item>
+
+        <!--根据数据类型输出不同表单-->
+
+             <el-form-item label="精度" prop="maxLength1" v-if="type=='float' || type=='double'">
+                <el-input v-model="valueType.maxLength1" placeholder="请输入精度" />
+              </el-form-item>
+
+            	<el-form-item label="单位" prop="maxLength" v-if="type=='int' || type=='long' || type=='float'  || type=='double'">
+                <el-input v-model="valueType.maxLength" placeholder="请输入单位" />
+              </el-form-item>
+
+              <el-form-item label="最大长度" prop="maxLength" v-if="type=='string'">
+                <el-input v-model="valueType.maxLength" placeholder="请输入最大长度" />
+              </el-form-item>
+
+               <el-form-item label="时间格式" prop="maxLength" v-if="type=='date'">
+                <el-input v-model="valueType.maxLength" placeholder="请输入时间格式" />
+              </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" size="default">取 消</el-button>
-					<el-button type="primary" @click="onSubmit" size="default">{{ruleForm.id!==0?'修 改':'添 加'}}</el-button>
+					<el-button type="primary" @click="onSubmit" size="default">{{ ruleForm.id !== 0 ? '修 改' : '添 加' }}</el-button>
 				</span>
 			</template>
 		</el-dialog>
@@ -65,93 +70,104 @@
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, defineComponent,ref, unref } from 'vue';
+import { reactive, toRefs, defineComponent, ref, unref } from 'vue';
 import api from '/@/api/device';
 import uploadVue from '/@/components/upload/index.vue';
-import {ElMessage,UploadProps} from "element-plus";
+import { ElMessage, UploadProps } from 'element-plus';
 
 interface RuleFormState {
-  id:number;
-  name:string;
-  dictType:string;
-  status:number;
-  desc:string;
+	id: number;
+	name: string;
+	dictType: string;
+	status: number;
+	desc: string;
 }
 interface DicState {
 	isShowDialog: boolean;
 	ruleForm: RuleFormState;
-  typeData: RuleFormState[];
-  rules:{}
+	typeData: RuleFormState[];
+	rules: {};
 }
 
 export default defineComponent({
 	name: 'deviceEditPro',
-  components: { uploadVue },
-	setup(prop,{emit}) {
-    const formRef = ref<HTMLElement | null>(null);
-    const baseURL:string|undefined|boolean = import.meta.env.VITE_API_URL
+	components: { uploadVue },
+	setup(prop, { emit }) {
+		const formRef = ref<HTMLElement | null>(null);
 
 		const state = reactive<DicState>({
 			isShowDialog: false,
-    	typeData: [], // 
-    	
+			typeData: [], //
+      type: '',
+       valueType: {
+          type:'',
+          maxLength:'',
+
+        },
 
 			ruleForm: {
-        id:0,
-        name:'',
-        key:'',
-        transportProtocol:'',
-        accessMode:'0',
-        status:1,
-        desc:''
+				name: '',
+				key: '',
+				transportProtocol: '',
+				accessMode: '0',
+				status: 1,
+        valueType: {
+          type:'',
+          maxLength:'',
+
+        },
+				
+				desc: '',
+			},
+			rules: {
+				name: [{ required: true, message: '事件定义名称不能为空', trigger: 'blur' }],
+				key: [{ required: true, message: '事件定义标识不能为空', trigger: 'blur' }],
+				accessMode: [{ required: true, message: '请选择是否只读', trigger: 'blur' }],
+		
 			},
-      rules: {
-        name: [
-          { required: true, message: "事件定义名称不能为空", trigger: "blur" }
-        ],
-         key: [
-          { required: true, message: "事件定义标识不能为空", trigger: "blur" }
-        ],
-        accessMode: [{ required: true, message: '事件定义分类不能为空', trigger: 'blur' }],
-        deptId: [{ required: true, message: '所属部门不能为空', trigger: 'blur' }],
-        deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'blur' }],
-      }
 		});
 
 		// 打开弹窗
-		const openDialog = (row: RuleFormState|null) => {
-      resetForm();
-   
-        api.product.getDataType({ status: -1 }).then((res: any) => {
-        
-       
-            // const  datat=Object.values(res.dataType);
-            // datat.forEach((item, index) => {
-
-            // });
-          
-                state.typeData = res.dataType || [];
-           
-         
-        });
-       
-      if (row){
-        // api.dict.getType(row.dictId).then((res:any)=>{
-        //   state.ruleForm = res.data.dictType
-        // }
-        console.log(row);
-        state.ruleForm = row;
-      }
+		const openDialog = (row: RuleFormState | null) => {
+			resetForm();
+
+			api.product.getDataType({ status: -1 }).then((res: any) => {
+				const datat = Object.values(res.dataType);
+				datat.forEach((item, index) => {
+					if (index == 0) {
+						datat[index]['label'] = '基础类型';
+						datat[index]['options'] = item;
+					} else {
+						datat[index]['label'] = '扩展类型';
+						datat[index]['options'] = item;
+					}
+				});
+				console.log(datat);
+				state.typeData = datat || [];
+			});
+
+			if (row) {
+				// api.dict.getType(row.dictId).then((res:any)=>{
+				//   state.ruleForm = res.data.dictType
+				// }
+				console.log(row);
+				state.ruleForm = row;
+			}
 			state.isShowDialog = true;
 		};
-    const resetForm = ()=>{
-      state.ruleForm = {
-        id:0, 
-        name:'',
-        dictType:'',
-        status:1,
-        desc:''
-      }
+		const resetForm = () => {
+			state.ruleForm = {
+				id: 0,
+				name: '',
+				dictType: '',
+				status: 1,
+				desc: '',
+			};
+		};
+
+    const seletChange=(val)=>{
+      state.type=val;
+      console.log(val);
     };
 		// 关闭弹窗
 		const closeDialog = () => {
@@ -163,37 +179,40 @@ export default defineComponent({
 		};
 		// 新增
 		const onSubmit = () => {
-      const formWrap = unref(formRef) as any;
-      if (!formWrap) return;
-      formWrap.validate((valid: boolean) => {
-        if (valid) {
-          if(state.ruleForm.id!==0){
-            //修改
-            api.product.edit(state.ruleForm).then(()=>{
-              ElMessage.success('事件定义类型修改成功');
-              closeDialog(); // 关闭弹窗
-              emit('typeList')
-            })
-          }else{
-            //添加
-            console.log(state.ruleForm);
-            api.product.add(state.ruleForm).then(()=>{
-              ElMessage.success('事件定义类型添加成功');
-              closeDialog(); // 关闭弹窗
-              emit('typeList')
-            })
-          }
-        }
-      });
+			const formWrap = unref(formRef) as any;
+			if (!formWrap) return;
+			formWrap.validate((valid: boolean) => {
+				if (valid) {
+					if (state.ruleForm.id !== 0) {
+						//修改
+						api.product.edit(state.ruleForm).then(() => {
+							ElMessage.success('事件定义类型修改成功');
+							closeDialog(); // 关闭弹窗
+							emit('typeList');
+						});
+					} else {
+						//添加
+         
+            console.log(state.valueType);
+            state.ruleForm.valueType=state.valueType;
+           console.log(state.ruleForm);
+						api.model.eventadd(state.ruleForm).then(() => {
+							ElMessage.success('事件定义类型添加成功');
+							closeDialog(); // 关闭弹窗
+							emit('typeList');
+						});
+					}
+				}
+			});
 		};
 
-
 		return {
 			openDialog,
+      seletChange,
 			closeDialog,
 			onCancel,
 			onSubmit,
-      formRef,
+			formRef,
 			...toRefs(state),
 		};
 	},
@@ -202,31 +221,31 @@ export default defineComponent({
 
 <style scoped>
 .avatar-uploader .avatar {
-  width: 178px;
-  height: 178px;
-  display: block;
+	width: 178px;
+	height: 178px;
+	display: block;
 }
 </style>
 
 <style>
 .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/device/product/component/editTab.vue

@@ -1,63 +1,65 @@
 <template>
 	<div class="system-edit-dic-container">
-		<el-dialog :title="(ruleForm.id!==0?'修改':'添加')+'标签定义'" v-model="isShowDialog" width="769px">
+		<el-dialog :title="(ruleForm.id !== 0 ? '修改' : '添加') + '标签定义'" v-model="isShowDialog" width="769px">
 			<el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="120px">
-        <el-form-item label="标签定义标识" prop="key">
-          <el-input v-model="ruleForm.key" placeholder="请输入标签定义标识" />
-        </el-form-item>
-        <el-form-item label="标签定义名称" prop="name">
-          <el-input v-model="ruleForm.name" placeholder="请输入标签定义名称" />
-        </el-form-item>
-    
-    
-
-
-           
-         <el-form-item label="数据类型" prop="valueType">
-
-             <!--    <el-select v-model="ruleForm.valueType" placeholder="请选择数据类型">
-              <el-option
-                v-for="item in typeData"
-                :key="item.key"
-                :label="item.name"
-                :value="item.key"
-              />
-            </el-select> -->
-
-             <el-select v-model="ruleForm.valueType" placeholder="请选择数据类型" >
-              <el-option-group
-                v-for="group in typeData"
-                :key="group"
-                :label="group"
-              >
-                <el-option
-                  v-for="item in group.options"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </el-option-group>
-            </el-select>
-            </el-form-item> 
-
-          
-
-      
-        <el-form-item label="是否只读" prop="accessMode">
-          <el-radio-group v-model="ruleForm.accessMode" model-value="0">
-            <el-radio label="0">读写</el-radio>
-
-            <el-radio label="1">只读</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-item label="标签定义标识" prop="key">
+					<el-input v-model="ruleForm.key" placeholder="请输入标签定义标识" />
+				</el-form-item>
+				<el-form-item label="标签定义名称" prop="name">
+					<el-input v-model="ruleForm.name" placeholder="请输入标签定义名称" />
+				</el-form-item>
+
+				<el-form-item label="数据类型" prop="type">
+					<el-select v-model="valueType.type" placeholder="请选择数据类型" @change="seletChange">
+						<el-option-group v-for="group in typeData" :key="group.label" :label="group.label">
+							<el-option v-for="item in group.options" :key="item.type" :label="item.title" :value="item.type" />
+						</el-option-group>
+					</el-select>
+				</el-form-item>
+
+        <!--根据数据类型输出不同表单-->
+
+             <el-form-item label="精度" prop="maxLength1" v-if="type=='float' || type=='double'">
+                <el-input v-model="valueType.maxLength1" placeholder="请输入精度" />
+              </el-form-item>
+
+            	<el-form-item label="单位" prop="maxLength" v-if="type=='int' || type=='long' || type=='float'  || type=='double'">
+                <el-input v-model="valueType.maxLength" placeholder="请输入单位" />
+              </el-form-item>
+
+              <el-form-item label="最大长度" prop="maxLength" v-if="type=='string'">
+                <el-input v-model="valueType.maxLength" placeholder="请输入最大长度" />
+              </el-form-item>
+
+               <el-form-item label="时间格式" prop="maxLength" v-if="type=='date'">
+                <el-input v-model="valueType.maxLength" placeholder="请输入时间格式" />
+              </el-form-item>
+             
+
+        <!--根据数据类型输出不同表单-->
+
+
+
+
+
+
+
+
+				<el-form-item label="是否只读" prop="accessMode">
+					<el-radio-group v-model="ruleForm.accessMode" model-value="0">
+						<el-radio label="0">读写</el-radio>
+
+						<el-radio label="1">只读</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" size="default">取 消</el-button>
-					<el-button type="primary" @click="onSubmit" size="default">{{ruleForm.id!==0?'修 改':'添 加'}}</el-button>
+					<el-button type="primary" @click="onSubmit" size="default">{{ ruleForm.id !== 0 ? '修 改' : '添 加' }}</el-button>
 				</span>
 			</template>
 		</el-dialog>
@@ -65,93 +67,104 @@
 </template>
 
 <script lang="ts">
-import { reactive, toRefs, defineComponent,ref, unref } from 'vue';
+import { reactive, toRefs, defineComponent, ref, unref } from 'vue';
 import api from '/@/api/device';
 import uploadVue from '/@/components/upload/index.vue';
-import {ElMessage,UploadProps} from "element-plus";
+import { ElMessage, UploadProps } from 'element-plus';
 
 interface RuleFormState {
-  id:number;
-  name:string;
-  dictType:string;
-  status:number;
-  desc:string;
+	id: number;
+	name: string;
+	dictType: string;
+	status: number;
+	desc: string;
 }
 interface DicState {
 	isShowDialog: boolean;
 	ruleForm: RuleFormState;
-  typeData: RuleFormState[];
-  rules:{}
+	typeData: RuleFormState[];
+	rules: {};
 }
 
 export default defineComponent({
 	name: 'deviceEditPro',
-  components: { uploadVue },
-	setup(prop,{emit}) {
-    const formRef = ref<HTMLElement | null>(null);
-    const baseURL:string|undefined|boolean = import.meta.env.VITE_API_URL
+	components: { uploadVue },
+	setup(prop, { emit }) {
+		const formRef = ref<HTMLElement | null>(null);
 
 		const state = reactive<DicState>({
 			isShowDialog: false,
-    	typeData: [], // 
-    	
+			typeData: [], //
+      type: '',
+       valueType: {
+          type:'',
+          maxLength:'',
+
+        },
 
 			ruleForm: {
-        id:0,
-        name:'',
-        key:'',
-        transportProtocol:'',
-        accessMode:'0',
-        status:1,
-        desc:''
+				name: '',
+				key: '',
+				transportProtocol: '',
+				accessMode: '0',
+				status: 1,
+        valueType: {
+          type:'',
+          maxLength:'',
+
+        },
+				
+				desc: '',
+			},
+			rules: {
+				name: [{ required: true, message: '标签定义名称不能为空', trigger: 'blur' }],
+				key: [{ required: true, message: '标签定义标识不能为空', trigger: 'blur' }],
+				accessMode: [{ required: true, message: '请选择是否只读', trigger: 'blur' }],
+		
 			},
-      rules: {
-        name: [
-          { required: true, message: "标签定义名称不能为空", trigger: "blur" }
-        ],
-         key: [
-          { required: true, message: "标签定义标识不能为空", trigger: "blur" }
-        ],
-        accessMode: [{ required: true, message: '标签定义分类不能为空', trigger: 'blur' }],
-        deptId: [{ required: true, message: '所属部门不能为空', trigger: 'blur' }],
-        deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'blur' }],
-      }
 		});
 
 		// 打开弹窗
-		const openDialog = (row: RuleFormState|null) => {
-      resetForm();
-   
-        api.product.getDataType({ status: -1 }).then((res: any) => {
-        
-       
-            // const  datat=Object.values(res.dataType);
-            // datat.forEach((item, index) => {
-
-            // });
-          
-                state.typeData = res.dataType || [];
-           
-         
-        });
-       
-      if (row){
-        // api.dict.getType(row.dictId).then((res:any)=>{
-        //   state.ruleForm = res.data.dictType
-        // }
-        console.log(row);
-        state.ruleForm = row;
-      }
+		const openDialog = (row: RuleFormState | null) => {
+			resetForm();
+
+			api.product.getDataType({ status: -1 }).then((res: any) => {
+				const datat = Object.values(res.dataType);
+				datat.forEach((item, index) => {
+					if (index == 0) {
+						datat[index]['label'] = '基础类型';
+						datat[index]['options'] = item;
+					} else {
+						datat[index]['label'] = '扩展类型';
+						datat[index]['options'] = item;
+					}
+				});
+				console.log(datat);
+				state.typeData = datat || [];
+			});
+
+			if (row) {
+				// api.dict.getType(row.dictId).then((res:any)=>{
+				//   state.ruleForm = res.data.dictType
+				// }
+				console.log(row);
+				state.ruleForm = row;
+			}
 			state.isShowDialog = true;
 		};
-    const resetForm = ()=>{
-      state.ruleForm = {
-        id:0, 
-        name:'',
-        dictType:'',
-        status:1,
-        desc:''
-      }
+		const resetForm = () => {
+			state.ruleForm = {
+				id: 0,
+				name: '',
+				dictType: '',
+				status: 1,
+				desc: '',
+			};
+		};
+
+    const seletChange=(val)=>{
+      state.type=val;
+      console.log(val);
     };
 		// 关闭弹窗
 		const closeDialog = () => {
@@ -163,37 +176,40 @@ export default defineComponent({
 		};
 		// 新增
 		const onSubmit = () => {
-      const formWrap = unref(formRef) as any;
-      if (!formWrap) return;
-      formWrap.validate((valid: boolean) => {
-        if (valid) {
-          if(state.ruleForm.id!==0){
-            //修改
-            api.product.edit(state.ruleForm).then(()=>{
-              ElMessage.success('标签定义类型修改成功');
-              closeDialog(); // 关闭弹窗
-              emit('typeList')
-            })
-          }else{
-            //添加
-            console.log(state.ruleForm);
-            api.product.add(state.ruleForm).then(()=>{
-              ElMessage.success('标签定义类型添加成功');
-              closeDialog(); // 关闭弹窗
-              emit('typeList')
-            })
-          }
-        }
-      });
+			const formWrap = unref(formRef) as any;
+			if (!formWrap) return;
+			formWrap.validate((valid: boolean) => {
+				if (valid) {
+					if (state.ruleForm.id !== 0) {
+						//修改
+						api.product.edit(state.ruleForm).then(() => {
+							ElMessage.success('标签定义类型修改成功');
+							closeDialog(); // 关闭弹窗
+							emit('typeList');
+						});
+					} else {
+						//添加
+         
+            console.log(state.valueType);
+            state.ruleForm.valueType=state.valueType;
+           console.log(state.ruleForm);
+						api.model.tagadd(state.ruleForm).then(() => {
+							ElMessage.success('标签定义类型添加成功');
+							closeDialog(); // 关闭弹窗
+							emit('typeList');
+						});
+					}
+				}
+			});
 		};
 
-
 		return {
 			openDialog,
+      seletChange,
 			closeDialog,
 			onCancel,
 			onSubmit,
-      formRef,
+			formRef,
 			...toRefs(state),
 		};
 	},
@@ -202,31 +218,31 @@ export default defineComponent({
 
 <style scoped>
 .avatar-uploader .avatar {
-  width: 178px;
-  height: 178px;
-  display: block;
+	width: 178px;
+	height: 178px;
+	display: block;
 }
 </style>
 
 <style>
 .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/device/product/detail.vue

@@ -70,7 +70,7 @@
 									<el-table-column label="操作" width="300" align="center">
 										<template #default="scope">
 											<el-button size="small" text type="warning">修改</el-button>
-											<el-button size="small" text type="danger">删除</el-button>
+											<el-button size="small" text type="danger" @click="onRowDel(scope.row.key,'attr')">删除</el-button>
 										</template>
 									</el-table-column>
 								</el-table>
@@ -89,7 +89,7 @@
 									<el-table-column label="操作" width="300" align="center">
 										<template #default="scope">
 											<el-button size="small" text type="warning">修改</el-button>
-											<el-button size="small" text type="danger">删除</el-button>
+											<el-button size="small" text type="danger" @click="onRowDel(scope.row.key,'fun')">删除</el-button>
 										</template>
 									</el-table-column>
 								</el-table>
@@ -115,7 +115,7 @@
 									<el-table-column label="操作" width="300" align="center">
 										<template #default="scope">
 											<el-button size="small" text type="warning">修改</el-button>
-											<el-button size="small" text type="danger">删除</el-button>
+											<el-button size="small" text type="danger" @click="onRowDel(scope.row.key,'event')">删除</el-button>
 										</template>
 									</el-table-column>
 								</el-table></el-tab-pane
@@ -144,7 +144,7 @@
 									<el-table-column label="操作" width="300" align="center">
 										<template #default="scope">
 											<el-button size="small" text type="warning">修改</el-button>
-											<el-button size="small" text type="danger">删除</el-button>
+											<el-button size="small" text type="danger" @click="onRowDel(scope.row.key,'tab')">删除</el-button>
 										</template>
 									</el-table-column>
 								</el-table>
@@ -171,6 +171,8 @@
 <script lang="ts">
 import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
 import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue';
+import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
+
 import EditDic from './component/editPro.vue';
 import EditAttr from './component/editAttr.vue';
 import EditFun from './component/editFun.vue';
@@ -265,6 +267,48 @@ export default defineComponent({
 		};
 
 
+		// 删除产品
+		const onRowDel = (key,type) => {
+			let msg = `此操作将永久删除该数据吗？，是否继续?`;
+			
+			if (key.length === 0) {
+				ElMessage.error('请选择要删除的数据。');
+				return;
+			}
+			ElMessageBox.confirm(msg, '提示', {
+				confirmButtonText: '确认',
+				cancelButtonText: '取消',
+				type: 'warning',
+			})
+				.then(() => {
+					if(type=='attr'){
+						api.model.propertydel(route.params.id,key).then(() => {
+							ElMessage.success('删除成功');
+							getproperty();
+						});
+					}
+					if(type=='fun'){
+						api.model.functiondel(route.params.id,key).then(() => {
+							ElMessage.success('删除成功');
+							getfunction();
+						});
+					}
+					if(type=='event'){
+						api.model.eventdel(route.params.id,key).then(() => {
+							ElMessage.success('删除成功');
+							getevent();
+						});
+					}
+					if(type=='tab'){
+						api.model.eventdel(route.params.id,key).then(() => {
+							ElMessage.success('删除成功');
+							tagdel();
+						});
+					}
+				})
+				.catch(() => {});
+		};
+
 
 		const getproperty=()=>{
 			api.model.property(state.tableData.param).then((res: any) => {
@@ -322,6 +366,7 @@ export default defineComponent({
 			editFunRef,
 			editEventRef,
 			editTabRef,
+			onRowDel,
 			getproperty,
 			getfunction,
 			getevent,