App端 设备管理页面调整
This commit is contained in:
parent
adc48a2dd8
commit
c954bf0919
@ -63,24 +63,28 @@
|
||||
@close="onPopupClose"
|
||||
>
|
||||
<!-- 表单部分 -->
|
||||
<van-form class="device-form" @submit="handleSubmit">
|
||||
<van-form
|
||||
class="device-form"
|
||||
@submit="handleSubmit"
|
||||
style="padding-bottom: 80px"
|
||||
>
|
||||
<h3>设备信息</h3>
|
||||
|
||||
<!-- 设备名称 -->
|
||||
<van-field
|
||||
v-model="form.deviceName"
|
||||
v-model="form.sbmc"
|
||||
label="设备名称"
|
||||
placeholder="请输入设备名称"
|
||||
:rules="[{ required: true, message: '请填写设备名称' }]"
|
||||
>
|
||||
<template #button>
|
||||
<span class="counter">{{ form.deviceName.length }}/20</span>
|
||||
<span class="counter">{{ form.sbmc.length }}/20</span>
|
||||
</template>
|
||||
</van-field>
|
||||
|
||||
<!-- 设备大类 -->
|
||||
<van-field
|
||||
v-model="form.category"
|
||||
v-model="form.sbdl"
|
||||
is-link
|
||||
arrow-direction="down"
|
||||
readonly
|
||||
@ -91,7 +95,7 @@
|
||||
|
||||
<!-- 设备类型 -->
|
||||
<van-field
|
||||
v-model="form.type"
|
||||
v-model="form.sblx"
|
||||
is-link
|
||||
arrow-direction="down"
|
||||
readonly
|
||||
@ -102,7 +106,7 @@
|
||||
|
||||
<!-- 设备型号 -->
|
||||
<van-field
|
||||
v-model="form.model"
|
||||
v-model="form.sbxh"
|
||||
label="设备型号"
|
||||
placeholder="请输入设备型号"
|
||||
:rules="[{ required: true, message: '请填写设备型号' }]"
|
||||
@ -110,7 +114,7 @@
|
||||
|
||||
<!-- 设备经度 -->
|
||||
<van-field
|
||||
v-model="form.lon"
|
||||
v-model="form.jd"
|
||||
label="设备经度"
|
||||
placeholder="请输入设备经度"
|
||||
:rules="[{ required: true, message: '请填写设备经度' }]"
|
||||
@ -118,7 +122,7 @@
|
||||
|
||||
<!-- 设备纬度 -->
|
||||
<van-field
|
||||
v-model="form.lat"
|
||||
v-model="form.wd"
|
||||
label="设备纬度"
|
||||
placeholder="请输入设备纬度"
|
||||
:rules="[{ required: true, message: '请填写设备纬度' }]"
|
||||
@ -126,18 +130,18 @@
|
||||
|
||||
<!-- 设备管理员 -->
|
||||
<van-field
|
||||
v-model="form.admin"
|
||||
v-model="form.glry"
|
||||
is-link
|
||||
arrow-direction="down"
|
||||
readonly
|
||||
label="设备管理员"
|
||||
placeholder="请选择设备管理员"
|
||||
label="管理人员"
|
||||
placeholder="请选择设备管理人员"
|
||||
@click="showAdminPicker = true"
|
||||
/>
|
||||
|
||||
<!-- 操作员 -->
|
||||
<van-field
|
||||
v-model="form.operator"
|
||||
v-model="form.czy"
|
||||
is-link
|
||||
arrow-direction="down"
|
||||
readonly
|
||||
@ -148,7 +152,7 @@
|
||||
|
||||
<!-- 购置日期 -->
|
||||
<van-field
|
||||
v-model="form.time"
|
||||
v-model="form.gzrq"
|
||||
is-link
|
||||
arrow-direction="down"
|
||||
readonly
|
||||
@ -157,6 +161,46 @@
|
||||
@click="showTimePicker = true"
|
||||
/>
|
||||
|
||||
<!-- 设备状态 -->
|
||||
<van-field
|
||||
v-model="form.sbzt"
|
||||
is-link
|
||||
arrow-direction="down"
|
||||
readonly
|
||||
label="设备状态"
|
||||
placeholder="请选择设备状态"
|
||||
@click="showStatusPicker = true"
|
||||
/>
|
||||
|
||||
<!-- 生产厂家 -->
|
||||
<van-field
|
||||
v-model="form.sccj"
|
||||
label="生产厂家"
|
||||
placeholder="请输入生产厂家"
|
||||
/>
|
||||
|
||||
<!-- 是否应急设备 -->
|
||||
<van-field
|
||||
v-model="form.sfyjsb"
|
||||
is-link
|
||||
arrow-direction="down"
|
||||
readonly
|
||||
label="是否应急设备"
|
||||
placeholder="请选择"
|
||||
@click="showEmergencyPicker = true"
|
||||
/>
|
||||
|
||||
<!-- 是否纳入市级补助范围 -->
|
||||
<van-field
|
||||
v-model="form.sfnrsjbz"
|
||||
is-link
|
||||
arrow-direction="down"
|
||||
readonly
|
||||
label="是否纳入市级补助范围"
|
||||
placeholder="请选择"
|
||||
@click="showSubsidyPicker = true"
|
||||
/>
|
||||
|
||||
<!-- 选择器弹窗 -->
|
||||
<!-- 设备大类弹窗 -->
|
||||
<van-popup
|
||||
@ -238,12 +282,69 @@
|
||||
/>
|
||||
</van-popup>
|
||||
|
||||
<div style="margin: 32px 16px">
|
||||
<van-button round block type="primary" native-type="submit">
|
||||
保存
|
||||
</van-button>
|
||||
</div>
|
||||
<!-- 设备状态弹窗 -->
|
||||
<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">
|
||||
保存
|
||||
</van-button>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
@ -260,6 +361,31 @@ const detailData = ref({}); // 养护站详情数据
|
||||
const searchValue = ref(""); // 搜索框输入值
|
||||
const equipmentList = ref([]);
|
||||
|
||||
const INIT_FORM = {
|
||||
qxmc: "",
|
||||
sbbh: "",
|
||||
sbdl: "",
|
||||
sbmc: "",
|
||||
sblx: "",
|
||||
sbxh: "",
|
||||
sbwz: "",
|
||||
jd: "",
|
||||
wd: "",
|
||||
glry: "",
|
||||
glryid: "",
|
||||
czy: "",
|
||||
czyid: "",
|
||||
gzrq: "",
|
||||
gmfy: "",
|
||||
sbzt: "",
|
||||
sccj: "",
|
||||
sfyjsb: "",
|
||||
sfnrsjbz: "",
|
||||
fsfw: "",
|
||||
yhzid: "",
|
||||
}; // 表单初始值
|
||||
const form = reactive({ ...INIT_FORM }); // 表单
|
||||
|
||||
// 获取养护站详情数据
|
||||
onMounted(() => {
|
||||
detailData.value = JSON.parse(decodeURIComponent(route.params.data));
|
||||
@ -314,17 +440,6 @@ const onPopupClose = () => {
|
||||
showPopup.value = false;
|
||||
};
|
||||
|
||||
const form = ref({
|
||||
deviceName: "",
|
||||
category: "",
|
||||
type: "",
|
||||
model: "",
|
||||
lon: "",
|
||||
lat: "",
|
||||
admin: "",
|
||||
operator: "",
|
||||
time: "",
|
||||
});
|
||||
const showCategoryPicker = ref(false);
|
||||
const showTypePicker = ref(false);
|
||||
|
||||
@ -383,6 +498,39 @@ const onDateConfirm = ({ selectedValues }) => {
|
||||
showTimePicker.value = false;
|
||||
};
|
||||
|
||||
// 设备状态相关
|
||||
const showStatusPicker = ref(false);
|
||||
const statusOptions = [
|
||||
{ text: "完好", value: "完好" },
|
||||
{ text: "损坏", value: "损坏" },
|
||||
{ text: "故障", value: "故障" },
|
||||
];
|
||||
const onStatusConfirm = (value) => {
|
||||
form.sbzt = value.selectedValues[0];
|
||||
showStatusPicker.value = false;
|
||||
};
|
||||
|
||||
// 是否应急设备相关
|
||||
const showEmergencyPicker = ref(false);
|
||||
const emergencyOptions = [
|
||||
{ text: "是", value: "是" },
|
||||
{ text: "否", value: "否" },
|
||||
];
|
||||
const onEmergencyConfirm = (value) => {
|
||||
form.sfyjsb = value.selectedValues[0];
|
||||
showEmergencyPicker.value = false;
|
||||
};
|
||||
// 是否纳入市级补助相关
|
||||
const showSubsidyPicker = ref(false);
|
||||
const subsidyOptions = [
|
||||
{ text: "是", value: "是" },
|
||||
{ text: "否", value: "否" },
|
||||
];
|
||||
const onSubsidyConfirm = (value) => {
|
||||
form.sfnrsjbz = value.selectedValues[0];
|
||||
showSubsidyPicker.value = false;
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
showToast("提交成功");
|
||||
showPopup.value = false;
|
||||
|
||||
@ -5,7 +5,7 @@ import Components from 'unplugin-vue-components/vite'
|
||||
import { VantResolver } from 'unplugin-vue-components/resolvers'
|
||||
|
||||
export default defineConfig({
|
||||
base: '/app/',
|
||||
// base: '/app/',
|
||||
plugins: [
|
||||
vue(),
|
||||
Components({
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user