612 lines
16 KiB
Vue
612 lines
16 KiB
Vue
<template>
|
||
<div class="home">
|
||
<van-nav-bar title="物资管理" fixed left-arrow @click-left="onClickLeft" />
|
||
|
||
<van-cell-group>
|
||
<van-cell title="当前站点" :value="yhzDetail.mc" />
|
||
</van-cell-group>
|
||
|
||
<div class="content" v-if="wzDetailData">
|
||
<van-cell-group>
|
||
<van-cell
|
||
title="物资信息"
|
||
style="font-size: 18px; font-weight: bold; line-height: inherit"
|
||
>
|
||
</van-cell>
|
||
<van-cell :title="'物资名称： ' + wzDetailData.wzmc">
|
||
<template #right-icon>
|
||
<van-image
|
||
:src="photos[0]?.photoUrl"
|
||
fit="cover"
|
||
width="100px"
|
||
@click="showImage(photos)"
|
||
></van-image>
|
||
</template>
|
||
</van-cell>
|
||
<van-cell
|
||
v-if="!isConfirm"
|
||
:title="'余量： ' + wzDetailData.ye + ' ' + wzDetailData.dw"
|
||
>
|
||
</van-cell>
|
||
<van-cell
|
||
v-if="isConfirm"
|
||
:title="'数量： ' + wzDetailData.sl + ' ' + wzDetailData.dw"
|
||
>
|
||
</van-cell>
|
||
<van-cell :title="'物资经度： ' + wzDetailData.jd"> </van-cell>
|
||
<van-cell :title="'物资纬度： ' + wzDetailData.wd"> </van-cell>
|
||
<van-cell :title="'负责人： ' + wzDetailData.fzr"> </van-cell>
|
||
<van-cell
|
||
:title="'入库日期： ' + (wzDetailData.rkrq?.split(' ')[0] || '')"
|
||
>
|
||
</van-cell>
|
||
<van-cell :title="'所属养护站： ' + wzDetailData.yhzMc"> </van-cell>
|
||
<van-cell :title="'备注： ' + wzDetailData.remark"> </van-cell>
|
||
</van-cell-group>
|
||
|
||
<van-popup
|
||
:show="showRemarkPopup"
|
||
position="bottom"
|
||
closeable
|
||
close-on-click-overlay
|
||
:style="{ height: '30%' }"
|
||
@close="onRemarkPopupClose"
|
||
>
|
||
<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="editForm.material.remark"
|
||
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="onRemarkPopupClose"
|
||
>
|
||
取消
|
||
</van-button>
|
||
<van-button
|
||
type="primary"
|
||
style="flex: 1; border-radius: 8px"
|
||
@click="onRemarkConfirm"
|
||
>
|
||
确认
|
||
</van-button>
|
||
</div>
|
||
</div>
|
||
</van-popup>
|
||
</div>
|
||
<van-tabbar v-if="isConfirm">
|
||
<van-tabbar-item>
|
||
<template #default>
|
||
<div class="button-box">
|
||
<van-button
|
||
type="warning"
|
||
style="width: 50%; border-radius: 10px"
|
||
@click="notYHZPopupOpen"
|
||
>
|
||
不是本站点设备
|
||
</van-button>
|
||
<van-button
|
||
type="primary"
|
||
style="width: 50%; border-radius: 10px"
|
||
@click="addToThisYHZPopupOpen"
|
||
>
|
||
添加到服务站
|
||
</van-button>
|
||
</div>
|
||
</template>
|
||
</van-tabbar-item>
|
||
</van-tabbar>
|
||
<van-tabbar v-else>
|
||
<van-tabbar-item>
|
||
<template #default>
|
||
<van-button
|
||
type="primary"
|
||
style="width: 100%; border-radius: 10px; display: block"
|
||
@click="handleRemarkOpen"
|
||
>
|
||
备注
|
||
</van-button>
|
||
</template>
|
||
</van-tabbar-item>
|
||
</van-tabbar>
|
||
|
||
<van-popup
|
||
:show="notYHZPopup"
|
||
position="bottom"
|
||
closeable
|
||
close-on-click-overlay
|
||
:style="{ height: '20%' }"
|
||
@close="notYHZPopupClose"
|
||
>
|
||
<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="notYHZPopupClose"
|
||
>
|
||
取消
|
||
</van-button>
|
||
<van-button
|
||
type="primary"
|
||
style="flex: 1; border-radius: 8px"
|
||
@click="notYHZConfirm"
|
||
>
|
||
确认
|
||
</van-button>
|
||
</div>
|
||
</div>
|
||
</van-popup>
|
||
|
||
<!-- 负责人弹窗 -->
|
||
<van-popup
|
||
:show="showAdminPicker"
|
||
round
|
||
position="bottom"
|
||
close-on-click-overlay
|
||
@close="showAdminPicker = false"
|
||
>
|
||
<van-picker
|
||
title="选择负责人"
|
||
:columns="adminOptions"
|
||
@confirm="onAdminConfirm"
|
||
@cancel="showAdminPicker = false"
|
||
/>
|
||
</van-popup>
|
||
|
||
<van-popup
|
||
:show="addToThisYHZPupup"
|
||
position="bottom"
|
||
closeable
|
||
close-on-click-overlay
|
||
@close="addToThisYHZPopupClose"
|
||
>
|
||
<div
|
||
style="
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 0 16px;
|
||
"
|
||
>
|
||
<h1
|
||
v-if="wzDetailData.fzr && wzDetailData.fzrid"
|
||
style="
|
||
margin: 20px 0 20px 0;
|
||
font-size: 18px;
|
||
color: #333;
|
||
text-align: center;
|
||
"
|
||
>
|
||
确认添加
|
||
</h1>
|
||
|
||
<div v-else>
|
||
<h1
|
||
style="
|
||
margin: 20px 0 20px 0;
|
||
font-size: 18px;
|
||
color: #333;
|
||
text-align: center;
|
||
"
|
||
>
|
||
添加到服务站
|
||
</h1>
|
||
<!-- 负责人 -->
|
||
<van-field
|
||
v-model="editForm.material.fzr"
|
||
is-link
|
||
arrow-direction="down"
|
||
readonly
|
||
label="负责人"
|
||
placeholder="请选择负责人"
|
||
@click="showAdminPicker = true"
|
||
/>
|
||
<van-field v-model="editForm.material.remark" label="备注(非必填)">
|
||
</van-field>
|
||
<van-field label="设备照片(非必填)" center>
|
||
<template #input>
|
||
<van-uploader
|
||
v-model="fileList"
|
||
@delete="handleDelete"
|
||
name="photos"
|
||
:file-list="fileList"
|
||
:file-type="['image/jpeg', 'image/png']"
|
||
:after-read="afterRead"
|
||
multiple
|
||
:max-count="6"
|
||
/>
|
||
</template>
|
||
</van-field>
|
||
</div>
|
||
|
||
<div style="display: flex; gap: 20px; width: 100%">
|
||
<van-button
|
||
type="default"
|
||
style="flex: 1; border-radius: 8px"
|
||
@click="addToThisYHZPopupClose"
|
||
>
|
||
取消
|
||
</van-button>
|
||
<van-button
|
||
type="primary"
|
||
style="flex: 1; border-radius: 8px"
|
||
@click="AddToThisTHZConfirm"
|
||
>
|
||
确认
|
||
</van-button>
|
||
</div>
|
||
</div>
|
||
</van-popup>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, toRaw, reactive } from "vue";
|
||
import { useRouter, useRoute } from "vue-router";
|
||
import { showToast, showLoadingToast, showImagePreview } from "vant";
|
||
import { request } from "../../../../shared/utils/request";
|
||
|
||
const router = useRouter();
|
||
const route = useRoute();
|
||
|
||
const yhzDetail = ref({});
|
||
const wzData = ref([]);
|
||
const wzDetailData = ref(); // 物资详情数据
|
||
const photos = ref([]); // 物资图片数据
|
||
const isConfirm = ref(false); // 是否是在确认物资
|
||
const editForm = reactive({});
|
||
|
||
onMounted(() => {
|
||
const data = JSON.parse(decodeURIComponent(route.params.data));
|
||
yhzDetail.value = data.yhzDetail;
|
||
wzData.value = data.material;
|
||
isConfirm.value = data.isConfirm;
|
||
console.log("传递过来的参数:", data);
|
||
getwzDetail();
|
||
});
|
||
|
||
// 获取物资详情
|
||
const getwzDetail = async () => {
|
||
try {
|
||
const res = await request({
|
||
url: `/snow-ops-platform/yjwz/getById?rid=${wzData.value.rid}`,
|
||
method: "GET",
|
||
});
|
||
if (res.code && res.code === "00000") {
|
||
wzDetailData.value = res.data.material;
|
||
// console.log('wzDetailData',toRaw(wzDetailData.value));
|
||
photos.value = res.data.photos;
|
||
} else {
|
||
throw new Error(res.message);
|
||
}
|
||
} catch (error) {
|
||
showToast({
|
||
message: error.message,
|
||
type: "error",
|
||
});
|
||
console.log("error", error);
|
||
}
|
||
};
|
||
|
||
const onClickLeft = () => {
|
||
router.push({
|
||
name: "MaterialManage",
|
||
params: { data: encodeURIComponent(JSON.stringify(yhzDetail.value)) },
|
||
});
|
||
};
|
||
|
||
const showImage = (photos) => {
|
||
const photosArr = photos.map((item) => item.photoUrl);
|
||
showImagePreview({
|
||
images: photosArr,
|
||
closeable: true,
|
||
});
|
||
};
|
||
|
||
// 编辑备注相关
|
||
const showRemarkPopup = ref(false);
|
||
const handleRemarkOpen = () => {
|
||
editForm.material = JSON.parse(JSON.stringify(wzDetailData.value));
|
||
editForm.photos = [...photos.value];
|
||
showRemarkPopup.value = true;
|
||
};
|
||
const onRemarkPopupClose = () => {
|
||
getwzDetail();
|
||
showRemarkPopup.value = false;
|
||
};
|
||
const onRemarkConfirm = async () => {
|
||
try {
|
||
const res = await request({
|
||
url: `/snow-ops-platform/yjwz/update`,
|
||
method: "POST",
|
||
data: editForm,
|
||
});
|
||
if (res.code && res.code === "00000") {
|
||
showToast({
|
||
message: "备注信息保存成功",
|
||
type: "success",
|
||
});
|
||
onRemarkPopupClose();
|
||
} else {
|
||
throw new Error(res.message);
|
||
}
|
||
} catch (error) {
|
||
showToast({
|
||
message: error.message,
|
||
type: "fail",
|
||
});
|
||
}
|
||
};
|
||
|
||
// 确认物资相关
|
||
const notYHZPopup = ref(false);
|
||
const notYHZPopupOpen = () => {
|
||
notYHZPopup.value = true;
|
||
};
|
||
const notYHZPopupClose = () => {
|
||
notYHZPopup.value = false;
|
||
};
|
||
const notYHZConfirm = async () => {
|
||
try {
|
||
const res = await request({
|
||
url: "/snow-ops-platform/yjwz/confirm",
|
||
method: "POST",
|
||
data: {
|
||
rid: wzDetailData.value.rid,
|
||
confirmType: 2, // 确认类型 1-确认添加到本站，2-拒绝
|
||
},
|
||
});
|
||
if (res.code === "00000") {
|
||
router.push({
|
||
name: "MaterialManage",
|
||
params: { data: encodeURIComponent(JSON.stringify(yhzDetail.value)) },
|
||
});
|
||
} else {
|
||
throw new Error(res.message);
|
||
}
|
||
} catch (error) {
|
||
showToast({ type: "fail", message: error.message || "操作失败" });
|
||
}
|
||
};
|
||
|
||
const addToThisYHZPupup = ref(false);
|
||
const adminOptions = ref([]); // 负责人选项
|
||
// 获取养护站人员列表
|
||
const getPersonList = async () => {
|
||
try {
|
||
const data = {
|
||
pageNum: 1,
|
||
pageSize: 9999,
|
||
yhzid: yhzDetail.value.id,
|
||
};
|
||
const res = await request({
|
||
url: "/snow-ops-platform/yhzry/list",
|
||
method: "get",
|
||
params: data,
|
||
});
|
||
if (res.code === "00000") {
|
||
adminOptions.value = res.data.records.map((item) => ({
|
||
text: item.xm,
|
||
value: item.userId,
|
||
}));
|
||
} else {
|
||
throw new Error("人员信息获取失败");
|
||
}
|
||
} catch (error) {
|
||
console.log(error);
|
||
showToast({
|
||
type: "fail",
|
||
message: error.message,
|
||
});
|
||
}
|
||
};
|
||
// 负责人
|
||
const showAdminPicker = ref(false);
|
||
const onAdminConfirm = (value) => {
|
||
const selectedOption = adminOptions.value.find(
|
||
(opt) => opt.value === value.selectedValues[0]
|
||
);
|
||
if (selectedOption) {
|
||
editForm.material.fzr = selectedOption.text;
|
||
editForm.material.fzrid = selectedOption.value;
|
||
}
|
||
showAdminPicker.value = false;
|
||
};
|
||
const addToThisYHZPopupOpen = async () => {
|
||
await getPersonList();
|
||
editForm.material = JSON.parse(JSON.stringify(wzDetailData.value));
|
||
editForm.photos = [...photos.value];
|
||
fileList.value = photos.value.map((photo) => ({
|
||
url: photo.photoUrl,
|
||
status: "done",
|
||
message: "上传成功",
|
||
serverUrl: photo.photoUrl,
|
||
}));
|
||
addToThisYHZPupup.value = true;
|
||
};
|
||
const addToThisYHZPopupClose = () => {
|
||
addToThisYHZPupup.value = false;
|
||
};
|
||
|
||
const AddToThisTHZConfirm = async () => {
|
||
if (!wzDetailData.value.fzr || !wzDetailData.value.fzrid) {
|
||
await onRemarkConfirm();
|
||
}
|
||
try {
|
||
const data = {
|
||
rid: wzDetailData.value.rid,
|
||
confirmType: 1, // 确认类型 1-确认添加到本站，2-拒绝
|
||
};
|
||
const res = await request({
|
||
url: "/snow-ops-platform/yjwz/confirm",
|
||
method: "POST",
|
||
data,
|
||
});
|
||
if (res.code === "00000") {
|
||
showToast({
|
||
message: "操作成功",
|
||
type: "success",
|
||
});
|
||
addToThisYHZPopupClose();
|
||
router.push({
|
||
name: "MaterialManage",
|
||
params: { data: encodeURIComponent(JSON.stringify(yhzDetail.value)) },
|
||
});
|
||
} else {
|
||
throw new Error(res.message);
|
||
}
|
||
} catch (error) {
|
||
showToast({
|
||
type: "fail",
|
||
message: error.message || "操作失败",
|
||
});
|
||
}
|
||
};
|
||
|
||
// 上传文件相关
|
||
const fileList = ref([]);
|
||
// 文件删除
|
||
const handleDelete = (file) => {
|
||
if (file.serverUrl) {
|
||
const index = editForm.photos.findIndex(
|
||
(p) => p.photoUrl === file.serverUrl
|
||
);
|
||
if (index !== -1) {
|
||
editForm.photos.splice(index, 1);
|
||
}
|
||
}
|
||
};
|
||
|
||
// 文件上传
|
||
const afterRead = async (file) => {
|
||
try {
|
||
const toast = showLoadingToast({
|
||
message: "上传中...",
|
||
forbidClick: true,
|
||
duration: 0, // 设置为0表示不会自动关闭
|
||
});
|
||
const formData = new FormData();
|
||
formData.append("file", file.file);
|
||
const res = await request({
|
||
url: "/snow-ops-platform/file/upload",
|
||
method: "post",
|
||
data: formData,
|
||
});
|
||
toast.close();
|
||
if (res.code === "00000") {
|
||
editForm.photos.push({ photoUrl: res.data });
|
||
const index = fileList.value.findIndex((f) => f.file === file.file);
|
||
if (index !== -1) {
|
||
fileList.value[index].serverUrl = res.data;
|
||
}
|
||
|
||
console.log("editForm.photos", toRaw(editForm.photos));
|
||
console.log("fileList.value", fileList.value);
|
||
} else {
|
||
throw new Error(res.message);
|
||
}
|
||
} catch (error) {
|
||
toast.close();
|
||
showToast({
|
||
type: "fail",
|
||
message: error.message,
|
||
});
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.home {
|
||
padding-top: var(--van-nav-bar-height); /* 自动匹配导航栏高度 */
|
||
}
|
||
|
||
.content {
|
||
padding: 16px 16px 80px 16px;
|
||
}
|
||
|
||
.grid {
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.btn {
|
||
margin-top: 24px;
|
||
}
|
||
|
||
.status-tag {
|
||
display: inline-block;
|
||
padding: 3px 8px;
|
||
border-radius: 4px;
|
||
color: white;
|
||
font-size: 12px;
|
||
}
|
||
.status-good {
|
||
background-color: #07c160;
|
||
}
|
||
.status-warning {
|
||
background-color: #ff976a;
|
||
}
|
||
.status-danger {
|
||
background-color: #ee0a24;
|
||
}
|
||
:deep(.van-tabbar-item__text) {
|
||
width: 90%;
|
||
display: block;
|
||
}
|
||
.button-box {
|
||
display: flex;
|
||
justify-content: center;
|
||
width: 100%;
|
||
gap: 20px;
|
||
}
|
||
</style>
|
||
|