354 lines
8.3 KiB
Vue
354 lines
8.3 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>
|
|
|
|
<div class="content">
|
|
<van-cell-group>
|
|
<van-cell
|
|
v-for="(item, index) in materialList"
|
|
:key="index"
|
|
:title="item.wzmc"
|
|
is-link
|
|
:label="`余量：${item.sl} (${item.dw})`"
|
|
:to="{
|
|
name: 'MaterialDetail',
|
|
params: {
|
|
data: encodeURIComponent(
|
|
JSON.stringify({
|
|
yhzDetail: yhzDetail,
|
|
material: item,
|
|
})
|
|
),
|
|
},
|
|
}"
|
|
>
|
|
</van-cell>
|
|
</van-cell-group>
|
|
</div>
|
|
|
|
<van-button type="primary" class="add-btn" icon="plus" @click="handleAdd">
|
|
添加物资
|
|
</van-button>
|
|
|
|
<!-- 弹出层 -->
|
|
<van-popup
|
|
:show="showPopup"
|
|
position="bottom"
|
|
closeable
|
|
close-on-click-overlay
|
|
:style="{ height: '60%' }"
|
|
@close="onPopupClose"
|
|
>
|
|
<van-form class="materialAddForm" label-align="left" colon>
|
|
<h3>设备信息</h3>
|
|
|
|
<!-- 物资名称 -->
|
|
<van-field
|
|
v-model="form.wzmc"
|
|
label="物资名称"
|
|
placeholder="请输入物资名称"
|
|
:rules="[{ required: true, message: '请填写物资名称' }]"
|
|
>
|
|
<template #button>
|
|
<span class="counter">{{ form.wzmc.length }}/20</span>
|
|
</template>
|
|
</van-field>
|
|
|
|
<!-- 数量 -->
|
|
<van-field
|
|
v-model="form.sl"
|
|
label="数量"
|
|
placeholder="请输入数量"
|
|
type="number"
|
|
:rules="[{ required: true, message: '请填写物资数量' }]"
|
|
/>
|
|
|
|
<!-- 单位 -->
|
|
<van-field v-model="form.dw" label="单位" placeholder="物资单位" />
|
|
|
|
<!-- 负责人 -->
|
|
<van-field
|
|
v-model="form.fzr"
|
|
label="负责人"
|
|
placeholder="请输入负责人"
|
|
/>
|
|
|
|
<!-- 联系电话 -->
|
|
<van-field
|
|
v-model="form.lxdh"
|
|
label="联系电话"
|
|
placeholder="请输入联系电话"
|
|
/>
|
|
|
|
<!-- 存放地点 -->
|
|
<van-field
|
|
v-model="form.cfdd"
|
|
label="存放地点"
|
|
placeholder="请输入存放地点"
|
|
/>
|
|
|
|
<!-- 入库单位 -->
|
|
<van-field
|
|
v-model="form.rkdw"
|
|
label="入库单位"
|
|
placeholder="请输入入库单位"
|
|
/>
|
|
|
|
<!-- 入库日期 -->
|
|
<van-field
|
|
v-model="form.rkrq"
|
|
is-link
|
|
arrow-direction="down"
|
|
readonly
|
|
label="入库日期"
|
|
placeholder="请选择日期"
|
|
@click="showTimePicker = true"
|
|
/>
|
|
|
|
<!-- 入库日期弹窗 -->
|
|
<van-popup
|
|
:show="showTimePicker"
|
|
round
|
|
position="bottom"
|
|
close-on-click-overlay
|
|
@close="showTimePicker = false"
|
|
>
|
|
<van-date-picker
|
|
v-model="currentDate"
|
|
title="选择入库日期"
|
|
@confirm="onDateConfirm"
|
|
@cancel="showTimePicker = false"
|
|
/>
|
|
</van-popup>
|
|
</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 "vant/es/toast/style";
|
|
import "vant/es/popup/style";
|
|
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";
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const searchValue = ref(""); // 搜索框输入值
|
|
const showPopup = ref(false); // 控制弹出层显示隐藏
|
|
const yhzDetail = ref({}); // 养护站详情数据
|
|
const materialList = ref([]); // 物资列表数据
|
|
const INIT_FORM = {
|
|
rid: "",
|
|
rkrq: "", // 入库日期
|
|
rkdw: "", // 入库单位
|
|
sl: 0, // 数量
|
|
dw: "", // 单位
|
|
cfdd: "", // 存放地点
|
|
fzr: "", // 负责人
|
|
lxdh: "", // 联系电话
|
|
ye: "", // 余量
|
|
qxmc: "", // 区县名称
|
|
wzmc: "", // 物资名称
|
|
fzrid: "", // 负责人id
|
|
yhzid: "", // 养护站id
|
|
};
|
|
const form = reactive({ ...INIT_FORM }); // 表单
|
|
|
|
// 根据养护站rid获取物资列表
|
|
const getMaterialList = async (wzmc) => {
|
|
try {
|
|
const yhzid = yhzDetail.value.id;
|
|
if (!yhzid) {
|
|
return;
|
|
}
|
|
const data = {
|
|
yhzid,
|
|
wzmc,
|
|
paageNum: 1,
|
|
paageSize: 9999,
|
|
};
|
|
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();
|
|
});
|
|
|
|
// 购置日期
|
|
const showTimePicker = ref(false);
|
|
const currentDate = ref([
|
|
new Date().getFullYear(),
|
|
new Date().getMonth() + 1,
|
|
new Date().getDate(),
|
|
]);
|
|
const onDateConfirm = ({ selectedValues }) => {
|
|
form.rkrq = selectedValues.join("-");
|
|
showTimePicker.value = false;
|
|
};
|
|
|
|
const handleSubmit = async () => {
|
|
try {
|
|
showLoadingToast({
|
|
message: "正在保存",
|
|
forbidClick: true,
|
|
loadingType: "spinner",
|
|
});
|
|
form.yhzid = yhzDetail.value.id;
|
|
form.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();
|
|
Object.assign(form, { ...INIT_FORM });
|
|
getMaterialList(searchValue.value);
|
|
} else {
|
|
throw new Error(res.message);
|
|
}
|
|
} catch (error) {
|
|
console.log(error);
|
|
showToast({
|
|
type: "error",
|
|
message: error.message || "新增失败",
|
|
});
|
|
}
|
|
};
|
|
|
|
watch(
|
|
() => searchValue.value,
|
|
(newVal, oldVal) => {
|
|
if (newVal !== oldVal) {
|
|
getMaterialList(newVal);
|
|
}
|
|
}
|
|
);
|
|
|
|
const onClickLeft = () => {
|
|
router.push("/");
|
|
};
|
|
|
|
const handleAdd = () => {
|
|
showPopup.value = true;
|
|
};
|
|
|
|
const onPopupClose = () => {
|
|
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>
|
|
|