bxztApp/packages/mobile/src/views/Equipment/EquipmentManagement.vue

838 lines
22 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="detailData.mc" />
</van-cell-group>
<van-notice-bar mode="link">20台设备待确认</van-notice-bar>
<div class="content">
<van-cell-group>
<van-cell
v-for="(item, index) in equipmentList"
:key="index"
:title="item.sbmc"
is-link
:label="`设备类型: ` + item.sblx"
:to="{
name: 'EquipDetail',
params: {
data: encodeURIComponent(
JSON.stringify({
equipmentInfo: item,
yhzInfo: detailData,
})
),
},
}"
>
<template #value>
<span
:class="[
'status-tag',
`status-` +
(item.sbzt === '完好'
? 'good'
: item.sbzt === '损坏'
? 'warning'
: 'danger'),
]"
>{{ item.sbzt }}</span
>
</template>
</van-cell>
</van-cell-group>
</div>
<van-button
type="primary"
class="add-btn"
icon="plus"
@click="handleAddDevice"
>
添加设备
</van-button>
<!-- 添加设备弹窗 -->
<van-popup
:show="showPopup"
position="bottom"
closeable
close-on-click-overlay
:style="{ height: '80%' }"
@close="onPopupClose"
>
<!-- 表单部分 -->
<van-form class="device-form" label-align="left" colon>
<h3>设备信息</h3>
<!-- 设备名称 -->
<van-field
v-model="form.equipment.sbmc"
label="设备名称"
placeholder="请输入设备名称"
:rules="[{ required: true, message: '请填写设备名称' }]"
maxlength="20"
show-word-limit
>
</van-field>
<!-- 设备大类 -->
<van-field
v-model="form.equipment.sbdl"
is-link
arrow-direction="down"
label="设备大类"
placeholder="请选择设备大类"
@click="showCategoryPicker = true"
ref="categoryField"
/>
<!-- 设备类型 -->
<van-field
v-model="form.equipment.sblx"
is-link
arrow-direction="down"
label="设备类型"
placeholder="请选择设备类型"
@click="showTypePicker = true"
ref="typeField"
/>
<!-- 设备编号 -->
<van-field
v-model="form.equipment.sbbh"
label="设备编号"
placeholder="请输入设备编号"
:rules="[{ required: true, message: '请填写设备编号' }]"
/>
<!-- 设备型号 -->
<van-field
v-model="form.equipment.sbxh"
label="设备型号"
placeholder="请输入设备型号"
:rules="[{ required: true, message: '请填写设备型号' }]"
/>
<!-- 设备经度 -->
<van-field
v-model="form.equipment.jd"
label="设备经度"
placeholder="请输入设备经度"
/>
<!-- 设备纬度 -->
<van-field
v-model="form.equipment.wd"
label="设备纬度"
placeholder="请输入设备纬度"
/>
<!-- 设备管理员 -->
<van-field
v-model="form.equipment.glry"
is-link
arrow-direction="down"
readonly
label="管理人员"
placeholder="请选择设备管理人员"
@click="showAdminPicker = true"
/>
<!-- 操作员 -->
<van-field
v-model="form.equipment.czy"
is-link
arrow-direction="down"
readonly
label="操作员"
placeholder="请选择操作员"
@click="showOperatorPicker = true"
/>
<!-- 购买费用 -->
<van-field
v-model="form.equipment.gmfy"
type="number"
label="购买费用(万元)"
placeholder="请输入购买费用"
/>
<!-- 购置日期 -->
<van-field
v-model="form.equipment.gzrq"
is-link
arrow-direction="down"
readonly
label="购置日期"
placeholder="请选择日期"
@click="showTimePicker = true"
/>
<!-- 设备状态 -->
<van-field
v-model="form.equipment.sbzt"
is-link
arrow-direction="down"
readonly
label="设备状态"
placeholder="请选择设备状态"
@click="showStatusPicker = true"
/>
<!-- 生产厂家 -->
<van-field
v-model="form.equipment.sccj"
label="生产厂家"
placeholder="请输入生产厂家"
/>
<!-- 是否应急设备 -->
<van-field
v-model="form.equipment.sfyjsb"
is-link
arrow-direction="down"
readonly
label="是否应急设备"
placeholder="请选择"
@click="showEmergencyPicker = true"
/>
<!-- 是否纳入市级补助范围 -->
<van-field
v-model="form.equipment.sfnrsjbz"
is-link
arrow-direction="down"
readonly
label="是否纳入市级补助范围"
placeholder="请选择"
@click="showSubsidyPicker = true"
/>
<!-- 辐射范围 -->
<van-field
v-model="form.equipment.fsfw"
label="辐射范围"
placeholder="请输入辐射范围"
/>
<!-- 备注 -->
<van-field
v-model="form.equipment.remark"
label="备注"
placeholder="请输入备注"
type="textarea"
/>
<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-popup
:show="showCategoryPicker"
round
position="bottom"
close-on-click-overlay
@close="showCategoryPicker = false"
>
<van-picker
title="选择设备大类"
:columns="categoryOptions"
@confirm="onCategoryConfirm"
@cancel="showCategoryPicker = false"
/>
</van-popup>
<!-- 设备类型弹窗 -->
<van-popup
:show="showTypePicker"
round
position="bottom"
close-on-click-overlay
@close="showTypePicker = false"
>
<van-picker
title="选择设备类型"
:columns="typeOptions"
@confirm="onTypeConfirm"
@cancel="showTypePicker = false"
/>
</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="showOperatorPicker"
round
position="bottom"
close-on-click-overlay
@close="showOperatorPicker = false"
>
<van-picker
title="选择操作员"
:columns="operatorOptions"
@confirm="operatorConfirm"
@cancel="showOperatorPicker = false"
/>
</van-popup>
<!-- 购置日期弹窗 -->
<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-popup
:show="showStatusPicker"
round
position="bottom"
close-on-click-overlay
@close="showStatusPicker = false"
>
<van-picker
title="选择设备状态"
:columns="statusOptions"
@confirm="onStatusConfirm"
@cancel="showStatusPicker = false"
/>
</van-popup>
<!-- 是否应急设备弹窗 -->
<van-popup
:show="showEmergencyPicker"
round
position="bottom"
close-on-click-overlay
@close="showEmergencyPicker = false"
>
<van-picker
title="是否应急设备"
:columns="emergencyOptions"
@confirm="onEmergencyConfirm"
@cancel="showEmergencyPicker = false"
/>
</van-popup>
<!-- 是否纳入市级补助范围弹窗 -->
<van-popup
:show="showSubsidyPicker"
round
position="bottom"
close-on-click-overlay
@close="showSubsidyPicker = false"
>
<van-picker
title="是否纳入市级补助"
:columns="subsidyOptions"
@confirm="onSubsidyConfirm"
@cancel="showSubsidyPicker = 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 { 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 detailData = ref({}); // 养护站详情数据
const searchValue = ref(""); // 搜索框输入值
const equipmentList = ref([]);
const INIT_FORM = {
equipment: {
qxmc: "",
sbbh: "",
sbdl: "",
sbmc: "",
sblx: "",
sbxh: "",
sbwz: "",
jd: "",
wd: "",
glry: "",
glryid: "",
czy: "",
czyid: "",
gzrq: "",
gmfy: "",
sbzt: "",
sccj: "",
sfyjsb: "",
sfnrsjbz: "",
fsfw: "",
yhzid: "",
},
photos: [],
}; // 表单初始值
const form = reactive({ ...INIT_FORM }); // 表单
// 获取养护站详情数据
onMounted(() => {
detailData.value = JSON.parse(decodeURIComponent(route.params.data));
console.log('detailData',toRaw(detailData.value));
getEquipmentList();
});
watch(
() => searchValue.value,
(newVal, oldVal) => {
if (newVal !== oldVal) {
getEquipmentList(newVal);
}
}
);
// 获取养护站设备列表
const getEquipmentList = async (sbmc) => {
try {
const yhzid = detailData.value.id;
if (!yhzid) {
return;
}
const data = {
yhzid: detailData.value.id,
sbmc: sbmc,
pageNum: 1,
pageSize: 9999,
};
const res = await request({
url: "/snow-ops-platform/yjsb/list",
method: "get",
params: data,
});
if (res.code && res.code === "00000") {
equipmentList.value = res.data.records;
} else {
throw new Error(res.message);
}
} catch (error) {
console.log(error);
showToast({
type: "error",
message: error.message || "获取设备列表失败",
});
}
};
const showPopup = ref(false); // 控制弹出层显示隐藏
const onClickLeft = () => {
router.push("/");
};
// 获取养护站人员列表
const getPersonList = async () => {
try {
const data = {
pageNum: 1,
pageSize: 9999,
yhzid: detailData.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,
}));
operatorOptions.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 handleAddDevice = async () => {
await getPersonList();
form.equipment.sfnrsjbz = "否";
form.equipment.sfyjsb = "否";
showPopup.value = true;
};
const onPopupClose = () => {
showPopup.value = false;
};
const showCategoryPicker = ref(false);
const showTypePicker = ref(false);
const categoryField = ref(null);
const typeField = ref(null);
const categoryOptions = [
{ text: "自定义", value: "自定义" },
{ text: "大中修工程设备", value: "大中修工程设备" },
{ text: "小修保养设备", value: "小修保养设备" },
{ text: "交通工具", value: "交通工具" },
];
const typeOptions = [
{ text: "自定义", value: "自定义" },
{ text: "装载机", value: "装载机" },
{ text: "路面修补设备", value: "路面修补设备" },
{ text: "清扫车", value: "清扫车" },
{ text: "压路机", value: "压路机" },
{ text: "洒水车", value: "洒水车" },
{ text: "挖掘机", value: "挖掘机" },
{ text: "运输货车", value: "运输货车" },
{ text: "灌缝设备", value: "灌缝设备" },
{ text: "应急抢险车", value: "应急抢险车" },
{ text: "应急巡查车", value: "应急巡查车" },
{ text: "高空作业车", value: "高空作业车" },
{ text: "除雪设备", value: "除雪设备" },
{ text: "照明设备", value: "照明设备" },
{ text: "护栏维修设备", value: "护栏维修设备" },
{ text: "标线设备", value: "标线设备" },
{ text: "绿化修剪设备", value: "绿化修剪设备" },
{ text: "桥梁维护设备", value: "桥梁维护设备" },
{ text: "发电机", value: "发电机" },
{ text: "沥青洒布车", value: "沥青洒布车" },
{ text: "拖车", value: "拖车" },
{ text: "摊铺机", value: "摊铺机" },
{ text: "抽水设备", value: "抽水设备" },
{ text: "沥青拌和站", value: "沥青拌和站" },
{ text: "水泥拌和机", value: "水泥拌和机" },
{ text: "平地机", value: "平地机" },
{ text: "除雾设备", value: "除雾设备" },
{ text: "无人机", value: "无人机" },
{ text: "推土机", value: "推土机" },
{ text: "稀浆封层设备", value: "稀浆封层设备" },
];
const onCategoryConfirm = (value) => {
if (value.selectedValues[0] === "自定义") {
showCategoryPicker.value = false;
categoryField.value.focus();
} else {
form.equipment.sbdl = value.selectedValues[0];
showCategoryPicker.value = false;
}
};
const onTypeConfirm = (value) => {
if (value.selectedValues[0] === "自定义") {
showTypePicker.value = false;
typeField.value.focus();
} else {
form.equipment.sblx = value.selectedValues[0];
showTypePicker.value = false;
}
};
// 设备管理员
const showAdminPicker = ref(false);
const adminOptions = ref([]);
const onAdminConfirm = (value) => {
const selectedOption = adminOptions.value.find(
(opt) => opt.value === value.selectedValues[0]
);
if (selectedOption) {
form.equipment.glry = selectedOption.text;
form.equipment.glryid = selectedOption.value;
}
showAdminPicker.value = false;
};
// 操作员
const showOperatorPicker = ref(false);
const operatorOptions = ref([]);
const operatorConfirm = (value) => {
const selectedOption = operatorOptions.value.find(
(opt) => opt.value === value.selectedValues[0]
);
if (selectedOption) {
form.equipment.czy = selectedOption.text;
form.equipment.czyid = selectedOption.value;
}
showOperatorPicker.value = false;
};
// 购置日期
const showTimePicker = ref(false);
const currentDate = ref([
new Date().getFullYear(),
new Date().getMonth() + 1,
new Date().getDate(),
]);
const onDateConfirm = ({ selectedValues }) => {
form.equipment.gzrq = selectedValues.join("-");
showTimePicker.value = false;
};
// 设备状态相关
const showStatusPicker = ref(false);
const statusOptions = [
{ text: "完好", value: "完好" },
{ text: "损坏", value: "损坏" },
{ text: "报废", value: "报废" },
];
const onStatusConfirm = (value) => {
form.equipment.sbzt = value.selectedValues[0];
showStatusPicker.value = false;
};
// 是否应急设备相关
const showEmergencyPicker = ref(false);
const emergencyOptions = [
{ text: "是", value: "是" },
{ text: "否", value: "否" },
];
const onEmergencyConfirm = (value) => {
form.equipment.sfyjsb = value.selectedValues[0];
showEmergencyPicker.value = false;
};
// 是否纳入市级补助相关
const showSubsidyPicker = ref(false);
const subsidyOptions = [
{ text: "是", value: "是" },
{ text: "否", value: "否" },
];
const onSubsidyConfirm = (value) => {
form.equipment.sfnrsjbz = value.selectedValues[0];
showSubsidyPicker.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 handleSubmit = async () => {
try {
showLoadingToast({
message: "正在保存",
forbidClick: true,
loadingType: "spinner",
});
form.equipment.yhzid = detailData.value.id;
form.equipment.qxmc = detailData.value.qxmc;
// console.log('detailData', toRaw(detailData.value))
console.log("form", toRaw(form));
const res = await request({
url: "/snow-ops-platform/yjsb/add",
method: "post",
data: toRaw(form),
});
if (res.code && res.code === "00000") {
showToast({
type: "success",
message: "新增成功",
});
// 保留需要的数据
const keepData = {
yhzid: form.yhzid,
qxmc: form.qxmc,
};
// 重置表单数据
Object.keys(INIT_FORM).forEach((key) => {
if (!["yhzid", "qxmc"].includes(key)) {
form[key] = INIT_FORM[key];
}
});
// 恢复保留的数据
Object.assign(form, keepData);
onPopupClose();
getEquipmentList(searchValue.value);
} else {
console.log("res", res);
throw new Error(res.message);
}
} catch (error) {
console.log(error);
showToast({
type: "error",
message: error.message || "新增失败",
});
}
};
</script>
<style scoped>
.home {
padding-top: var(--van-nav-bar-height); /* 自动匹配导航栏高度 */
}
.content {
padding: 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;
}
.device-form {
padding: 16px 16px 80px 16px;
}
</style>