App端 设备管理页面调整

packages/mobile/src/views/EquipmentManagement.vue

@@ -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="设备管理员"
+          label="管理人员"
-          placeholder="请选择设备管理员"
+          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-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-form>
     </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;

packages/mobile/vite.config.js

@@ -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({