执行监听页面

src/components/XnWorkflow/globalAttribute/watchs.vue

@@ -1,24 +1,66 @@
 <!-- 全局属性执行监听页面 -->
 <template>
     <div class="home">
-        <div class="info">
         <navTitle>
             <template #nav_name>配置要执行的监听</template>
         </navTitle>
+        <div class="watchs_info">
+            <el-button type="primary" :icon="Plus" size="small" @click="handleAdd">新增</el-button>
+            <el-table :data="tableData" border style="width: 100%" height="400">
+                <el-table-column align="left" prop="listenerType" label="名称" width="180" />
+                <el-table-column align="left" prop="javaClass" label="JAVA监听器" width="180" />
+                <el-table-column align="left" fixed="right" label="操作" width="120">
+                    <template #default="scope">
+                        <el-button link type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
         </div>
+        <!-- 新增监听组件 -->
+        <addWatch
+            v-if="addFlag"
+            v-model="addFlag"
+            :addFlag="addFlag"
+            @close="close"
+            @addWatch="addTableData"
+        ></addWatch>
     </div>
 </template>
-<script>
+<script setup>
+import { ref } from 'vue'
 import navTitle from '../components/navTitle.vue'
-export default {
+import { Plus } from '@element-plus/icons-vue'
-    components: {
+import addWatch from '../components/addWatch.vue'
-        navTitle
+let tableData = ref([])
-    },
+const addFlag = ref(false)
-    data() {
+async function handleAdd() {
-        return {}
+    addFlag.value = true
-    },
+}
-    mounted() {},
+const close = async () => {
-    methods: {}
+    addFlag.value = false
+}
+//接收弹框新增数据
+function addTableData(val) {
+    tableData.value = [...tableData.value, val]
+}
+//删除
+const handleDelete=(index,val)=>{
+    tableData.value.splice(index,1)
 }
 </script>
-<style scoped></style>
+<style scoped lang="scss">
+.home {
+    width: 100%;
+    height: calc(100vh - 100px);
+    padding-top: 20px;
+    .watchs_info {
+        width: 96%;
+        height: auto;
+        margin-top: 10px;
+        margin: 0 auto;
+        .el-button {
+            margin: 10px 0;
+        }
+    }
+}
+</style>