执行监听弹框页面

src/components/XnWorkflow/components/addWatch.vue

@@ -0,0 +1,123 @@
+<template>
+    <el-dialog v-model="dialogFormVisible" title="新增" width="500">
+        <el-form ref="formRef" :model="formData" :rules="formRules" label-width="140px" label-position="top">
+            <el-form-item label="监听类型：" prop="listenerType">
+                <el-select v-model="formData.listenerType" placeholder="请选择类型">
+                    <el-option
+                        v-for="item in listenerTypeOptions"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                    />
+                </el-select>
+            </el-form-item>
+            <el-form-item label="JAVA监听器：" prop="javaClass">
+                <el-select v-model="formData.javaClass" placeholder="请选择JAVA监听器">
+                    <el-option
+                        v-for="item in listenerValueArray"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                    />
+                </el-select>
+            </el-form-item>
+        </el-form>
+        <template #footer>
+            <div class="dialog-footer">
+                <el-button @click="handleClose">取消</el-button>
+                <el-button type="primary" @click="handleAdd">确定</el-button>
+            </div>
+        </template>
+    </el-dialog>
+</template>
+<script setup>
+import { ref, reactive, onMounted, defineProps, defineEmits, watch } from 'vue'
+const dialogFormVisible = ref(true)
+const formLabelWidth = '140px'
+const props = defineProps({
+    addFlag: {
+        type: Boolean,
+        default: false
+    }
+})
+const emit=defineEmits(['close','addWacth'])
+watch(
+    () => props.addFlag,
+    (val, oldVal) => {
+        console.log(val, oldVal)
+        if (val) {
+            dialogFormVisible.value = val
+        }
+    },
+    {
+        immediate: true,
+        deep: true
+    }
+)
+//必填规则
+const formRules = {
+    listenerType: [{ required: true, message: '请选择监听类型', trigger: 'change' }],
+    javaClass: [{ required: true, message: '请选择JAVA监听器', trigger: 'change' }]
+}
+//form
+const formData = reactive({
+    listenerType: '',
+    javaClass: ''
+})
+//监听类型数组
+const listenerTypeOptions = reactive([
+    {
+        label: '开始',
+        value: '开始'
+    },
+    {
+        label: '完成',
+        value: '完成'
+    },
+    {
+        label: '拒绝',
+        value: '拒绝'
+    },
+    {
+        label: '终止',
+        value: '终止'
+    },
+    {
+        label: '撤回',
+        value: '撤回'
+    },
+    {
+        label: '删除',
+        value: '删除'
+    }
+])
+//java监听器数组
+const listenerValueArray = reactive([
+    {
+        label: 'vip.xiaonuo.flw.core.listener.FlwTestExecutionListener',
+        value: 'vip.xiaonuo.flw.core.listener.FlwTestExecutionListener'
+    }
+])
+//关闭
+async function handleClose(){
+    emit("close")
+}
+//提交
+async function handleAdd(){
+    emit("addWatch",formData);
+    emit("close");
+}
+onMounted(() => {
+    console.log()
+})
+</script>
+<style lang="scss" scoped>
+.dialog-footer {
+    padding: 20px 15px !important;
+}
+.el-form{
+    width:96%;
+    margin:0 auto;
+    margin-top:20px;
+}
+</style>