fabulous_front/src/components/PatrolMission/HandoverItemDialog.vue

49 lines
1.3 KiB
Vue

<template>
<el-dialog
:model-value="visible"
title="新增交接事項"
width="480px"
@close="close"
>
<el-form :model="form" label-width="90px">
<el-form-item label="工作內容">
<el-input v-model="form.content" />
</el-form-item>
<el-form-item label="持續">
<el-input v-model="form.continue" />
</el-form-item>
<el-form-item label="結案">
<el-input v-model="form.result" />
</el-form-item>
<el-form-item label="備註">
<el-input v-model="form.remark" type="textarea" :rows="2" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="close">取消</el-button>
<el-button type="primary" @click="confirm">加入</el-button>
</template>
</el-dialog>
</template>
<script setup>
const props = defineProps({ visible: { type: Boolean, default: false } });
const emit = defineEmits(["update:visible", "add"]);
import { reactive } from "vue";
const form = reactive({ content: "", continue: "", result: "", remark: "" });
function reset() {
form.content = "";
form.continue = "";
form.result = "";
form.remark = "";
}
function close() {
emit("update:visible", false);
reset();
}
function confirm() {
emit("add", { ...form });
close();
}
</script>
<style scoped></style>