设备详情 删除 报废弹窗

This commit is contained in:
huangchenhao 2025-10-27 10:50:08 +08:00
parent 34c6854359
commit e2f9136d6f
2 changed files with 135 additions and 9 deletions

View File

@ -50,15 +50,26 @@
<van-tabbar>
<van-tabbar-item>
<template #default>
<van-button type="primary" style="width: 80px; border-radius: 10px">
更多
</van-button>
</template>
<van-popover
placement="top-start"
:show="showPopover"
:actions="actions"
@select="onSelect"
>
<template #reference>
<van-button type="primary" style="width: 80px; border-radius: 10px">
更多
</van-button>
</template>
</van-popover>
</van-tabbar-item>
<van-tabbar-item
><template #default>
<van-button type="warning" style="width: 80px; border-radius: 10px" @click="onBrokenPopupOpen">
<van-button
type="warning"
style="width: 80px; border-radius: 10px"
@click="onBrokenPopupOpen"
>
损坏
</van-button>
</template></van-tabbar-item
@ -72,7 +83,11 @@
>
<van-tabbar-item
><template #default>
<van-button type="primary" style="width: 80px; border-radius: 10px" @click="onRemarkPopupOpen">
<van-button
type="primary"
style="width: 80px; border-radius: 10px"
@click="onRemarkPopupOpen"
>
备注
</van-button>
</template></van-tabbar-item
@ -96,7 +111,46 @@
:style="{ height: '20%' }"
@close="onDeletePopupClose"
>
<div
style="
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 16px;
"
>
<h1
style="
margin: 0 0 20px 0;
font-size: 18px;
color: #333;
text-align: center;
"
>
确认删除
</h1>
<div style="display: flex; gap: 20px; width: 100%">
<van-button
type="default"
style="flex: 1; border-radius: 8px"
@click="onDeletePopupClose"
>
取消
</van-button>
<van-button
type="primary"
style="flex: 1; border-radius: 8px"
@click="onDeleteConfirm"
>
确认
</van-button>
</div>
</div>
</van-popup>
<van-popup
:show="showBrokenPopup"
position="bottom"
@ -111,9 +165,58 @@
position="bottom"
closeable
close-on-click-overlay
:style="{ height: '20%' }"
:style="{ height: '30%' }"
@close="on报废PopupClose"
>
<div
style="
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 16px;
"
>
<h1
style="
margin: 0 0 12px 0;
font-size: 18px;
color: #333;
text-align: center;
"
>
报废
</h1>
<van-field
v-model="scrapReason"
placeholder="请填写原因"
style="
width: 100%;
margin-bottom: 16px;
border-radius: 8px;
background: #f7f8fa;
"
/>
<div style="display: flex; gap: 20px; width: 100%">
<van-button
type="default"
style="flex: 1; border-radius: 8px"
@click="on报废PopupClose"
>
取消
</van-button>
<van-button
type="primary"
style="flex: 1; border-radius: 8px"
@click="on报废Confirm"
>
确认
</van-button>
</div>
</div>
</van-popup>
</div>
</template>
@ -126,6 +229,16 @@ import { showToast } from "vant";
const router = useRouter();
const route = useRoute();
const showPopover = ref(false);
const actions = [{ text: "删除" }, { text: "报废" }];
const onSelect = (action) => {
if (action.text === "删除") {
showDeletePopup.value = true;
}
if (action.text === "报废") {
show报废Popup.value = true;
}
};
const equipmentInfo = ref({
title: "",
label: "",
@ -142,20 +255,32 @@ const onClickLeft = () => {
};
const show报废Popup = ref(false);
const scrapReason = ref(''); //
const on报废PopupClose = () => {
show报废Popup.value = false;
scrapReason.value = '';
};
const on报废Confirm = () => {
show报废Popup.value = false;
scrapReason.value = '';
};
const showBrokenPopup = ref(false);
const onBrokenPopupOpen = () => {
showBrokenPopup.value = true;
showBrokenPopup.value = true;
};
const onBrokenPopupClose = () => {
showBrokenPopup.value = false;
};
const showDeletePopup = ref(false);
const onDeletePopupClose = () => {
showDeletePopup.value = false;
};
const onDeleteConfirm = () => {
showDeletePopup.value = false;
};
const showRemarkPopup = ref(false);
const onRemarkPopupOpen = () => {
showRemarkPopup.value = true;

View File

@ -11,6 +11,7 @@
<van-cell-group>
<van-cell title="当前站点" value="李家坝仓库" />
</van-cell-group>
<van-notice-bar mode="link">20台设备待确认</van-notice-bar>
<div class="content">
<van-cell-group>