feat: edit check items

This commit is contained in:
Fine 2023-05-31 15:28:23 +08:00
parent bca5b923bf
commit 93fe21121c

View File

@ -26,6 +26,23 @@ limitations under the License. -->
/> />
</div> </div>
<div v-for="(item, index) in states.checkItems" :key="index"> <div v-for="(item, index) in states.checkItems" :key="index">
<div class="item-title">
<span class="title">{{ `Item - ${index + 1}` }}</span>
<Icon
class="ml-5 cp"
iconName="remove_circle_outline"
size="middle"
v-show="states.checkItems.length !== 1"
@click="removeItem($event, index)"
/>
<Icon
class="ml-5 cp"
v-show="index === states.checkItems.length - 1"
iconName="add_circle_outlinecontrol_point"
size="middle"
@click="createItem"
/>
</div>
<div> <div>
<div class="label">{{ t("monitorType") }}</div> <div class="label">{{ t("monitorType") }}</div>
<Selector <Selector
@ -39,7 +56,7 @@ limitations under the License. -->
</div> </div>
<div> <div>
<div class="label">{{ t("count") }}</div> <div class="label">{{ t("count") }}</div>
<el-input size="small" class="profile-input" :min="0" v-model="item.count" type="number" @change="changeParam" /> <el-input-number size="small" class="profile-input" :min="0" v-model="item.count" @change="changeParam" />
</div> </div>
<div> <div>
<div class="label">{{ t("threshold") }}</div> <div class="label">{{ t("threshold") }}</div>
@ -47,7 +64,7 @@ limitations under the License. -->
</div> </div>
<div> <div>
<div class="label">{{ t("period") }}</div> <div class="label">{{ t("period") }}</div>
<el-input size="small" class="profile-input" :min="0" v-model="item.period" type="number" @change="changeParam" /> <el-input-number size="small" class="profile-input" :min="0" v-model="item.period" @change="changeParam" />
</div> </div>
<div> <div>
<div class="label">{{ t("uriRegex") }}</div> <div class="label">{{ t("uriRegex") }}</div>
@ -109,6 +126,24 @@ limitations under the License. -->
}); });
emits("edit", { ...states, checkItems }, props.order); emits("edit", { ...states, checkItems }, props.order);
} }
function createItem(e: PointerEvent) {
e.stopPropagation();
states.checkItems.push({
type: "",
threshold: "",
period: NaN,
count: NaN,
});
}
function removeItem(e: PointerEvent, key: number) {
e.stopPropagation();
if (states.checkItems.length === 1) {
return;
}
states.checkItems = states.checkItems.filter((_, index: number) => index !== key);
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.profile-input { .profile-input {
@ -129,4 +164,9 @@ limitations under the License. -->
border-color: #409eff; border-color: #409eff;
} }
} }
.item-title {
margin-bottom: 5px;
font-size: 14px;
}
</style> </style>