Эх сурвалжийг харах

Merge branch 'master' of http://git.mydig.net/Sagoo-Cloud/sagoo-admin-ui

yanglzh 3 жил өмнө
parent
commit
6f397d37c1

+ 9 - 0
src/api/device/index.ts

@@ -30,6 +30,15 @@ export default {
   dept: {
     getList: (params: object) => get('/system/dept/tree', params),
   },
+
+  model: {
+    property: (params: object) => get('/product/tsl/property/list', params),
+    propertyadd: (data: object) => post('/product/tsl/property/add', data),
+
+    function: (params: object) => get('/product/tsl/function/list', params),
+    event: (params: object) => get('/product/tsl/event/list', params),
+    tag: (params: object) => get('/product/tsl/tag/list', params),
+  },
   
   
 }

+ 172 - 156
src/views/device/product/component/editAttr.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.propertyadd(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>

+ 1 - 1
src/views/device/product/component/editTab.vue

@@ -24,7 +24,7 @@
               />
             </el-select> -->
 
-             <el-select v-model="ruleForm.valueType" placeholder="请选择数据类型">
+             <el-select v-model="ruleForm.valueType" placeholder="请选择数据类型" >
               <el-option-group
                 v-for="group in typeData"
                 :key="group"

+ 154 - 40
src/views/device/product/detail.vue

@@ -45,20 +45,28 @@
 				</el-tab-pane>
 				<el-tab-pane label="物模型" name="2">
 					<div class="wu-box">
-						<el-tabs type="border-card">
-							<el-tab-pane label="属性定义">
+						<el-tabs type="border-card" v-model="activetab" @tab-click="wuhandleClick">
+							<el-tab-pane label="属性定义" name="attr">
 								<div class="wu-title">
 									<div class="title">属性定义</div>
 									<div><el-button type="primary" @click="onOpenEditAttr()">添加</el-button></div>
 								</div>
 
-								<el-table style="width: 100%">
-									<el-table-column label="属性标识" align="center" prop="id" />
+								<el-table style="width: 100%" :data="tableData.data" v-if="activetab == 'attr'">
+									<el-table-column label="属性标识" align="center" prop="key" />
 									<el-table-column label="属性名称" prop="name" :show-overflow-tooltip="true" />
-									<el-table-column label="数据类型" prop="key" :show-overflow-tooltip="true" />
-									<el-table-column label="属性值来源" prop="categoryName" :show-overflow-tooltip="true" />
-									<el-table-column label="是否只读" prop="deptName" :show-overflow-tooltip="true" />
-									<el-table-column label="说明" prop="messageProtocol" :show-overflow-tooltip="true" />
+									<el-table-column prop="valueType" label="数据类型" width="120" align="center">
+										<template #default="scope">
+											<span>{{ scope.row.valueType.type }}</span>
+										</template>
+									</el-table-column>
+									<el-table-column prop="accessMode" label="是否只读" width="120" align="center">
+										<template #default="scope">
+											<el-tag type="info" size="small" v-if="scope.row.accessMode">只读</el-tag>
+											<el-tag type="success" size="small" v-else>读写</el-tag>
+										</template>
+									</el-table-column>
+									<el-table-column label="说明" prop="desc" :show-overflow-tooltip="true" />
 									<el-table-column label="操作" width="300" align="center">
 										<template #default="scope">
 											<el-button size="small" text type="warning">修改</el-button>
@@ -67,17 +75,17 @@
 									</el-table-column>
 								</el-table>
 							</el-tab-pane>
-							<el-tab-pane label="功能定义">
+							<el-tab-pane label="功能定义" name="fun">
 								<div class="wu-title">
 									<div class="title">功能定义</div>
 									<div><el-button type="primary" @click="onOpenEditFun()">添加</el-button></div>
 								</div>
 
-								<el-table style="width: 100%">
-									<el-table-column label="功能标识" align="center" prop="id" />
+								<el-table style="width: 100%" :data="tableData.data" v-if="activetab == 'fun'">
+									<el-table-column label="功能标识" align="center" prop="key" />
 									<el-table-column label="名称" prop="name" :show-overflow-tooltip="true" />
-									<el-table-column label="是否异步" prop="key" :show-overflow-tooltip="true" />
-									<el-table-column label="描述" prop="categoryName" :show-overflow-tooltip="true" />
+
+									<el-table-column label="描述" prop="desc" :show-overflow-tooltip="true" />
 									<el-table-column label="操作" width="300" align="center">
 										<template #default="scope">
 											<el-button size="small" text type="warning">修改</el-button>
@@ -86,18 +94,24 @@
 									</el-table-column>
 								</el-table>
 							</el-tab-pane>
-							<el-tab-pane label="事件定义">
+							<el-tab-pane label="事件定义" name="event">
 								<div class="wu-title">
 									<div class="title">事件定义</div>
 									<div><el-button type="primary" @click="onOpenEditEvent()">添加</el-button></div>
 								</div>
 
-								<el-table style="width: 100%">
-									<el-table-column label="事件标识" align="center" prop="id" />
+								<el-table style="width: 100%" :data="tableData.data" v-if="activetab == 'event'">
+									<el-table-column label="事件标识" align="center" prop="key" />
 									<el-table-column label="名称" prop="name" :show-overflow-tooltip="true" />
-									<el-table-column label="事件级别" prop="key" :show-overflow-tooltip="true" />
-									<el-table-column label="描述" prop="categoryName" :show-overflow-tooltip="true" />
-									
+									<el-table-column prop="level" label="事件级别" width="120" align="center">
+										<template #default="scope">
+											<el-tag type="primary" size="small" v-if="scope.row.level == 0">普通</el-tag>
+											<el-tag type="warning" size="small" v-if="scope.row.level == 1">警告</el-tag>
+											<el-tag type="danger" size="small" v-if="scope.row.level == 2">紧急</el-tag>
+										</template>
+									</el-table-column>
+									<el-table-column label="描述" prop="desc" :show-overflow-tooltip="true" />
+
 									<el-table-column label="操作" width="300" align="center">
 										<template #default="scope">
 											<el-button size="small" text type="warning">修改</el-button>
@@ -106,37 +120,52 @@
 									</el-table-column>
 								</el-table></el-tab-pane
 							>
-							<el-tab-pane label="标签定义"
+							<el-tab-pane label="标签定义" name="tab"
 								><div class="wu-title">
 									<div class="title">标签定义</div>
 									<div><el-button type="primary" @click="onOpenEditTab()">添加</el-button></div>
 								</div>
 
-								<el-table style="width: 100%">
-									<el-table-column label="属性标识" align="center" prop="id" />
+								<el-table style="width: 100%" :data="tableData.data" v-if="activetab == 'tab'">
+									<el-table-column label="属性标识" align="center" prop="key" />
 									<el-table-column label="属性名称" prop="name" :show-overflow-tooltip="true" />
-									<el-table-column label="数据类型" prop="key" :show-overflow-tooltip="true" />
-									<el-table-column label="属性值来源" prop="categoryName" :show-overflow-tooltip="true" />
-									<el-table-column label="是否只读" prop="deptName" :show-overflow-tooltip="true" />
-									<el-table-column label="说明" prop="messageProtocol" :show-overflow-tooltip="true" />
+									<el-table-column prop="valueType" label="数据类型" width="120" align="center">
+										<template #default="scope">
+											<span>{{ scope.row.valueType.type }}</span>
+										</template>
+									</el-table-column>
+									<el-table-column prop="accessMode" label="是否只读" width="120" align="center">
+										<template #default="scope">
+											<el-tag type="info" size="small" v-if="scope.row.accessMode">只读</el-tag>
+											<el-tag type="success" size="small" v-else>读写</el-tag>
+										</template>
+									</el-table-column>
+									<el-table-column label="描述" prop="desc" :show-overflow-tooltip="true" />
 									<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>
 										</template>
 									</el-table-column>
-								</el-table></el-tab-pane
-							>
+								</el-table>
+							</el-tab-pane>
 						</el-tabs>
+						<pagination
+							v-show="tableData.total > 0"
+							:total="tableData.total"
+							v-model:page="tableData.param.pageNum"
+							v-model:limit="tableData.param.pageSize"
+							@pagination="typeList"
+						/>
 					</div>
 				</el-tab-pane>
 			</el-tabs>
 		</div>
 		<EditDic ref="editDicRef" @typeList="typeList" />
-		<EditAttr ref="editAttrRef" @typeList="typeList" />
-		<EditFun ref="editFunRef" @typeList="typeList" />
-		<EditEvent ref="editEventRef" @typeList="typeList" />
-		<EditTab ref="editTabRef" @typeList="typeList" />
+		<EditAttr ref="editAttrRef" @typeList="getproperty" />
+		<EditFun ref="editFunRef" @typeList="getfunction" />
+		<EditEvent ref="editEventRef" @typeList="getevent" />
+		<EditTab ref="editTabRef" @typeList="gettab" />
 	</div>
 </template>
 <script lang="ts">
@@ -152,9 +181,25 @@ import { useRoute } from 'vue-router';
 
 import api from '/@/api/device';
 
+interface TableDataState {
+	ids: number[];
+	tableData: {
+		data: [];
+		total: number;
+		loading: boolean;
+		param: {
+			pageNum: number;
+			pageSize: number;
+			name: string;
+			deviceType: string;
+			status: string;
+			dateRange: string[];
+		};
+	};
+}
 export default defineComponent({
 	name: 'deviceEditPro',
-	components: { EditDic,EditAttr,EditFun,EditEvent,EditTab },
+	components: { EditDic, EditAttr, EditFun, EditEvent, EditTab },
 
 	setup(prop, context) {
 		const route = useRoute();
@@ -163,10 +208,23 @@ export default defineComponent({
 		const editFunRef = ref();
 		const editEventRef = ref();
 		const editTabRef = ref();
-		const state = reactive<DicState>({
+		const state = reactive<TableDataState>({
 			isShowDialog: false,
 			activeName: '2', // 分类数据
+			activetab: 'attr', // 分类数据
 			detail: [],
+			tableData: {
+				data: [],
+				total: 0,
+				loading: false,
+				param: {
+					pageNum: 1,
+					productId: route.params && route.params.id,
+					pageSize: 10,
+					status: '',
+					dateRange: [],
+				},
+			},
 		});
 
 		onMounted(() => {
@@ -174,34 +232,85 @@ export default defineComponent({
 			api.product.detail(ids).then((res: any) => {
 				state.detail = res.data;
 			});
+
+			//第一次加载
+			api.model.property(state.tableData.param).then((res: any) => {
+				state.tableData.data = res.Data;
+				state.tableData.total = res.Total;
+			});
 		});
 
 		//打开添加属性弹窗
 		const onOpenEditAttr = () => {
-			editAttrRef.value.openDialog({product_id:route.params.id,id:0});
+			editAttrRef.value.openDialog({ product_id: route.params.id, id: 0 });
 		};
 
 		//打开添加功能弹窗
 		const onOpenEditFun = () => {
-			editFunRef.value.openDialog({product_id:route.params.id,id:0});
+			editFunRef.value.openDialog({ product_id: route.params.id, id: 0 });
 		};
 		//打开添加事件弹窗
 		const onOpenEditEvent = () => {
-			editEventRef.value.openDialog({product_id:route.params.id,id:0});
+			editEventRef.value.openDialog({ product_id: route.params.id, id: 0 });
 		};
 
 		//打开添加事件弹窗
 		const onOpenEditTab = () => {
-			editTabRef.value.openDialog({product_id:route.params.id,id:0});
+			editTabRef.value.openDialog({ product_id: route.params.id, id: 0 });
 		};
 
-
-
 		// 打开修改产品弹窗
 		const onOpenEditDic = (row: TableDataRow) => {
 			editDicRef.value.openDialog(row);
 		};
 
+
+
+		const getproperty=()=>{
+			api.model.property(state.tableData.param).then((res: any) => {
+				state.tableData.data = res.Data;
+				state.tableData.total = res.Total;
+			});
+		};
+
+		const getfunction=()=>{
+			api.model.function(state.tableData.param).then((res: any) => {
+				state.tableData.data = res.Data;
+				state.tableData.total = res.Total;
+			});
+		};
+		const getevent=()=>{
+			api.model.event(state.tableData.param).then((res: any) => {
+				state.tableData.data = res.Data;
+				state.tableData.total = res.Total;
+			});
+		};
+
+		const gettab=()=>{
+			api.model.tag(state.tableData.param).then((res: any) => {
+				state.tableData.data = res.Data;
+				state.tableData.total = res.Total;
+			});
+		};
+
+		const wuhandleClick = (tab: TabsPaneContext) => {
+			state.activetab = 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: TabsPaneContext, event: Event) => {
 			console.log(tab, event);
 		};
@@ -213,6 +322,11 @@ export default defineComponent({
 			editFunRef,
 			editEventRef,
 			editTabRef,
+			getproperty,
+			getfunction,
+			getevent,
+			gettab,
+			wuhandleClick,
 			onOpenEditTab,
 			onOpenEditEvent,
 			onOpenEditAttr,