133 lines
3.4 KiB
Vue
133 lines
3.4 KiB
Vue
<template>
|
||
<el-dialog v-model="dialogFormVisible" title="新增" width="500" :append-to-body="true">
|
||
<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')
|
||
}
|
||
//提交
|
||
const formRef = ref(null)
|
||
async function handleAdd() {
|
||
formRef.value.validate(valid => {
|
||
if (valid) {
|
||
console.log(valid)
|
||
emit("addWatch",formData);
|
||
emit("close");
|
||
} else {
|
||
console.log('error submit!')
|
||
return false
|
||
}
|
||
})
|
||
}
|
||
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>
|