Files
pig-farm-controller-fe/src/components/tasks/DelayTask.vue

67 lines
1.5 KiB
Vue

<template>
<div class="delay-task-editor">
<el-form-item
label="延时时间(秒)"
:prop="propPath"
:rules="isEditing ? {
required: true,
message: '请输入延时时间',
trigger: 'blur'
} : null"
class="delay-time-form-item"
>
<el-input-number
:model-value="delayDuration"
@update:model-value="updateDelayDuration"
placeholder="请输入延时时间"
style="width: 100%;"
></el-input-number>
</el-form-item>
</div>
</template>
<script>
export default {
name: "DelayTaskEditor",
props: {
// The parameters object for the task
parameters: {
type: Object,
required: true,
},
// The full prop path for validation, e.g., 'parameters.delay_duration'
propPath: {
type: String,
default: "parameters.delay_duration", // Updated default prop path
},
// New prop to control editability
isEditing: {
type: Boolean,
default: true,
},
},
emits: ["update:parameters"],
computed: {
delayDuration() { // Renamed from delaySeconds
return this.parameters?.delay_duration;
},
},
methods: {
updateDelayDuration(value) { // Renamed from updateDelaySeconds
this.$emit("update:parameters", {
...this.parameters,
delay_duration: value,
});
},
},
};
</script>
<style scoped>
.delay-task-editor {
width: 100%;
}
.delay-time-form-item :deep(.el-form-item__label) {
white-space: nowrap;
}
</style>