527 lines
14 KiB
Vue
527 lines
14 KiB
Vue
<template>
|
||
<div class="home">
|
||
<van-nav-bar title="物资管理" fixed left-arrow @click-left="onClickLeft">
|
||
</van-nav-bar>
|
||
<van-search shape="round" v-model="searchValue" :show-action="false" placeholder="请输入物资名称" />
|
||
<van-cell-group>
|
||
<van-cell title="当前站点" :value="yhzDetail.mc" />
|
||
</van-cell-group>
|
||
<van-notice-bar mode="link" v-if="pendingConfirmList.length" @click="handleConfirm">{{ pendingConfirmList.length
|
||
}}个物资待确认</van-notice-bar>
|
||
|
||
<div class="content">
|
||
<van-cell-group>
|
||
<van-cell v-for="(item, index) in materialList" :key="index" :title="item.wzmc" is-link
|
||
:label="`余量：${item.ye} (${item.dw})`" :to="{
|
||
name: 'MaterialDetail',
|
||
params: {
|
||
data: encodeURIComponent(
|
||
JSON.stringify({
|
||
yhzDetail: yhzDetail,
|
||
material: item,
|
||
isConfirm: false,
|
||
})
|
||
),
|
||
},
|
||
}">
|
||
</van-cell>
|
||
</van-cell-group>
|
||
<van-button type="primary" class="add-btn" icon="plus" @click="handleAdd">
|
||
添加物资
|
||
</van-button>
|
||
</div>
|
||
|
||
<!-- 弹出层 -->
|
||
<van-popup :show="showPopup" position="bottom" closeable close-on-click-overlay @close="onPopupClose">
|
||
<van-form class="materialAddForm" label-align="left" colon>
|
||
<h3>添加物资</h3>
|
||
|
||
<!-- 物资名称 -->
|
||
<van-field v-model="form.material.wzmc" label="物资名称" placeholder="请输入物资名称"
|
||
:rules="[{ required: true, message: '请填写物资名称' }]" maxlength="20" show-word-limit>
|
||
</van-field>
|
||
|
||
<!-- 数量 -->
|
||
<van-field v-model="form.material.sl" label="数量" placeholder="请输入数量" type="number"
|
||
:rules="[{ required: true, message: '请填写物资数量' }]"></van-field>
|
||
|
||
<!-- 单位 -->
|
||
<van-field v-model="form.material.dw" is-link arrow-direction="down" label="单位" placeholder="物资单位"
|
||
@click="showDwPicker = true" ref="dwField" />
|
||
<van-popup :show="showDwPicker" round position="bottom" close-on-click-overlay @close="showDwPicker = false">
|
||
<van-picker title="选择物资单位" :columns="dwOptions" @confirm="onDwConfirm" @cancel="showDwPicker = false" />
|
||
</van-popup>
|
||
|
||
<!-- 物资经度 -->
|
||
<van-field v-model="form.material.jd" label="物资经度" placeholder="请输入物资经度">
|
||
<template #button>
|
||
<van-button size="small" type="primary" @click.stop="handleGetLocation">获取位置</van-button>
|
||
</template>
|
||
</van-field>
|
||
<!-- 物资纬度 -->
|
||
<van-field v-model="form.material.wd" label="物资纬度" placeholder="请输入物资纬度">
|
||
<template #button>
|
||
<van-button size="small" type="primary" @click.stop="handleGetLocation">获取位置</van-button>
|
||
</template>
|
||
</van-field>
|
||
|
||
<!-- 负责人 -->
|
||
<van-field v-model="form.material.fzr" is-link arrow-direction="down" readonly label="负责人" placeholder="请选择负责人"
|
||
@click="showFzrPicker = true" />
|
||
|
||
<!-- 负责人弹窗 -->
|
||
<van-popup :show="showFzrPicker" round position="bottom" close-on-click-overlay @close="showFzrPicker = false">
|
||
<van-picker title="选择设备管理员" :columns="fzrOptions" @confirm="onFzrConfirm" @cancel="showFzrPicker = false" />
|
||
</van-popup>
|
||
|
||
<!-- 备注 -->
|
||
<van-field v-model="form.material.remark" label="备注" type="textarea" placeholder="" maxlength="20"
|
||
show-word-limit>
|
||
</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>
|
||
</van-form>
|
||
<div style="
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 16px;
|
||
background: white;
|
||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
|
||
z-index: 100;
|
||
">
|
||
<van-button round block type="primary" native-type="submit" @click="handleSubmit">
|
||
保存
|
||
</van-button>
|
||
</div>
|
||
</van-popup>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, reactive, toRaw, watch } from "vue";
|
||
import { useRouter, useRoute } from "vue-router";
|
||
import { showToast, showLoadingToast } from "vant";
|
||
import { request } from "../../../../shared/utils/request";
|
||
import { loadAMap } from "../../../../shared/utils/aMap";
|
||
|
||
const router = useRouter();
|
||
const route = useRoute();
|
||
const searchValue = ref(""); // 搜索框输入值
|
||
const showPopup = ref(false); // 控制弹出层显示隐藏
|
||
const yhzDetail = ref({}); // 养护站详情数据
|
||
const materialList = ref([]); // 物资列表数据
|
||
const getInitForm = () => ({
|
||
material: {
|
||
jd: "", // 物资经度
|
||
wd: "", // 物资纬度
|
||
rkrq: "", // 入库日期
|
||
rkdw: "", // 入库单位
|
||
sl: 0, // 数量
|
||
dw: "", // 单位
|
||
cfdd: "", // 存放地点
|
||
fzr: "", // 负责人
|
||
lxdh: "", // 联系电话
|
||
ye: "", // 余量
|
||
qxmc: "", // 区县名称
|
||
wzmc: "", // 物资名称
|
||
fzrid: "", // 负责人id
|
||
fzr: "", // 负责人名称
|
||
yhzid: "", // 养护站id
|
||
remark: "", // 备注
|
||
},
|
||
photos: [],
|
||
});
|
||
const form = reactive(getInitForm());
|
||
const pendingConfirmList = ref([]); // 待确认物资列表
|
||
|
||
// 获取待确认物资列表
|
||
const getPendingConfirmList = async () => {
|
||
try {
|
||
const data = {
|
||
yhzid: yhzDetail.value.id,
|
||
pageNum: 1,
|
||
pageSize: 9999,
|
||
};
|
||
const res = await request({
|
||
url: "/snow-ops-platform/yjwz/pendingConfirmList",
|
||
method: "GET",
|
||
params: data,
|
||
});
|
||
if (res.code === "00000") {
|
||
pendingConfirmList.value = res.data.records;
|
||
} else {
|
||
throw new Error(res.message);
|
||
}
|
||
} catch (error) {
|
||
showToast({
|
||
type: "fail",
|
||
message: error.message || "获取待确认物资列表失败",
|
||
});
|
||
}
|
||
};
|
||
|
||
// 跳转到确认物资页面
|
||
const handleConfirm = () => {
|
||
if (yhzDetail.value.isManager) {
|
||
router.push({
|
||
name: "MaterialConfirm",
|
||
params: {
|
||
data: encodeURIComponent(JSON.stringify(yhzDetail.value)),
|
||
},
|
||
});
|
||
} else {
|
||
handleMessage();
|
||
}
|
||
};
|
||
|
||
// 弹出提示
|
||
const handleMessage = () => {
|
||
showToast({
|
||
type: "fail",
|
||
message: "您不是站长,无法确认设备",
|
||
});
|
||
};
|
||
|
||
// 根据养护站rid获取物资列表
|
||
const getMaterialList = async (wzmc) => {
|
||
try {
|
||
const yhzid = yhzDetail.value.id;
|
||
if (!yhzid) {
|
||
return;
|
||
}
|
||
const data = {
|
||
yhzid,
|
||
wzmc,
|
||
paageNum: 1,
|
||
paageSize: 9999,
|
||
requestSource: 'app', // web: Web端请求，app：移动端请求
|
||
};
|
||
const res = await request({
|
||
url: "/snow-ops-platform/yjwz/list",
|
||
method: "GET",
|
||
params: data,
|
||
});
|
||
if (res.code && res.code === "00000") {
|
||
materialList.value = res.data.records;
|
||
} else {
|
||
throw new Error(res.message);
|
||
}
|
||
} catch (error) {
|
||
showToast({
|
||
type: "error",
|
||
message: error.message || "获取物资列表失败",
|
||
});
|
||
}
|
||
};
|
||
|
||
// 组件挂载时获取数据
|
||
onMounted(() => {
|
||
yhzDetail.value = JSON.parse(decodeURIComponent(route.params.data));
|
||
console.log("yhzDetail", toRaw(yhzDetail.value));
|
||
getMaterialList();
|
||
getPendingConfirmList();
|
||
});
|
||
|
||
// 购置日期相关
|
||
const showTimePicker = ref(false);
|
||
|
||
// 选择单位相关
|
||
const dwField = ref(null);
|
||
const showDwPicker = ref(false);
|
||
const dwOptions = [
|
||
{ text: "辆", value: "辆" },
|
||
{ text: "米", value: "米" },
|
||
{ text: "桶", value: "桶" },
|
||
{ text: "把", value: "把" },
|
||
{ text: "吨", value: "吨" },
|
||
{ text: "双", value: "双" },
|
||
{ text: "件", value: "件" },
|
||
{ text: "付", value: "付" },
|
||
{ text: "个", value: "个" },
|
||
{ text: "件", value: "件" },
|
||
{ text: "自定义", value: "自定义" },
|
||
];
|
||
const onDwConfirm = (value) => {
|
||
if (value.selectedValues[0] === "自定义") {
|
||
showDwPicker.value = false;
|
||
dwField.value.focus();
|
||
} else {
|
||
form.material.dw = value.selectedValues[0];
|
||
showDwPicker.value = false;
|
||
}
|
||
};
|
||
|
||
const handleSubmit = async () => {
|
||
try {
|
||
showLoadingToast({
|
||
message: "正在保存",
|
||
forbidClick: true,
|
||
loadingType: "spinner",
|
||
});
|
||
form.material.yhzid = yhzDetail.value.id;
|
||
form.material.qxmc = yhzDetail.value.qxmc;
|
||
console.log("form", toRaw(form));
|
||
const res = await request({
|
||
url: "/snow-ops-platform/yjwz/add",
|
||
method: "post",
|
||
data: toRaw(form),
|
||
});
|
||
if (res.code && res.code === "00000") {
|
||
showToast({
|
||
type: "success",
|
||
message: "新增成功",
|
||
});
|
||
onPopupClose();
|
||
getMaterialList(searchValue.value);
|
||
getPendingConfirmList();
|
||
} else {
|
||
throw new Error(res.message);
|
||
}
|
||
} catch (error) {
|
||
console.log(error);
|
||
showToast({
|
||
type: "error",
|
||
message: error.message || "新增失败",
|
||
});
|
||
}
|
||
};
|
||
|
||
// 负责人相关
|
||
const showFzrPicker = ref(false);
|
||
const fzrOptions = ref([]);
|
||
const onFzrConfirm = (value) => {
|
||
// 获取选中的负责人ID
|
||
const selectedId = value.selectedValues[0];
|
||
|
||
// 在fzrOptions中查找对应的负责人名称
|
||
const selectedPerson = fzrOptions.value.find(
|
||
(item) => item.value === selectedId
|
||
);
|
||
// 同时设置id和名称
|
||
if (selectedPerson) {
|
||
form.material.fzrid = selectedId;
|
||
form.material.fzr = selectedPerson.text;
|
||
} else {
|
||
form.material.fzrid = "";
|
||
form.material.fzr = "";
|
||
}
|
||
showFzrPicker.value = false;
|
||
};
|
||
|
||
// 图片上传相关
|
||
const fileList = ref([]);
|
||
// 文件删除
|
||
const handleDelete = (file) => {
|
||
if (file.serverUrl) {
|
||
const index = form.photos.findIndex((p) => p.photoUrl === file.serverUrl);
|
||
if (index !== -1) {
|
||
form.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") {
|
||
form.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("form.photos", toRaw(form.photos));
|
||
console.log("fileList.value", fileList.value);
|
||
} else {
|
||
throw new Error(res.message);
|
||
}
|
||
} catch (error) {
|
||
toast.close();
|
||
showToast({
|
||
type: "fail",
|
||
message: error.message,
|
||
});
|
||
}
|
||
};
|
||
|
||
// 获取经纬度
|
||
const handleGetLocation = async () => {
|
||
const location = await request({
|
||
url: "/v3/ip",
|
||
method: "get",
|
||
params: {
|
||
key: 'c30e9ebd414fd6a4dfcc1ba8c2060dbb'
|
||
},
|
||
isThirdPartyAPI: true // 添加标识
|
||
});
|
||
console.log("location", toRaw(location));
|
||
|
||
// // 确保AMap完成加载
|
||
// if (!window.AMap) {
|
||
// await loadAMap();
|
||
// }
|
||
// const loadingToast = showLoadingToast({
|
||
// message: "正在获取位置",
|
||
// forbidClick: true,
|
||
// duration: 0, // 设置为0表示不会自动关闭
|
||
// zIndex: 9999,
|
||
// });
|
||
|
||
// AMap.plugin("AMap.Geolocation", () => {
|
||
// const geolocation = new AMap.Geolocation({
|
||
// enableHighAccuracy: true,
|
||
// timeout: 5000,
|
||
// showMarker: false,
|
||
// zoomToAccuracy: true,
|
||
// });
|
||
|
||
// geolocation.getCurrentPosition((status, result) => {
|
||
// if (status === "complete") {
|
||
// form.material.jd = result.position.lng.toFixed(6);
|
||
// form.material.wd = result.position.lat.toFixed(6);
|
||
// loadingToast.close();
|
||
// } else {
|
||
// loadingToast.close();
|
||
// showToast("定位失败 请检查网络情况后重试");
|
||
// console.log("result", result);
|
||
// }
|
||
// });
|
||
// });
|
||
};
|
||
|
||
watch(
|
||
() => searchValue.value,
|
||
(newVal, oldVal) => {
|
||
if (newVal !== oldVal) {
|
||
getMaterialList(newVal);
|
||
}
|
||
}
|
||
);
|
||
|
||
const onClickLeft = () => {
|
||
router.push("/");
|
||
};
|
||
|
||
// 获取养护站人员列表
|
||
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") {
|
||
fzrOptions.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 handleAdd = async () => {
|
||
await getPersonList();
|
||
handleGetLocation();
|
||
showPopup.value = true;
|
||
};
|
||
|
||
const onPopupClose = () => {
|
||
Object.assign(form, getInitForm());
|
||
fileList.value = [];
|
||
[showDwPicker, showFzrPicker].forEach((v) => (v.value = false));
|
||
showPopup.value = false;
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.home {
|
||
padding-top: var(--van-nav-bar-height);
|
||
/* 自动匹配导航栏高度 */
|
||
}
|
||
|
||
.content {
|
||
padding: 16px 16px 80px 16px;
|
||
}
|
||
|
||
.content .van-cell-group .van-cell {
|
||
margin-bottom: 10px;
|
||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.add-btn {
|
||
position: fixed;
|
||
bottom: 20px;
|
||
left: 16px;
|
||
right: 16px;
|
||
width: calc(100% - 32px);
|
||
margin: 0 auto;
|
||
border-radius: 24px;
|
||
font-size: 16px;
|
||
height: 44px;
|
||
z-index: 999;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.materialAddForm {
|
||
padding: 16px 16px 80px 16px;
|
||
}
|
||
</style> |