设备管理

package.json

@@ -11,11 +11,24 @@
     "build:all": "pnpm -r build",
     "lint": "pnpm -r lint"
   },
-  "keywords": ["monorepo", "vue3", "vant", "大屏", "h5"],
+  "keywords": [
+    "monorepo",
+    "vue3",
+    "vant",
+    "大屏",
+    "h5"
+  ],
   "author": "",
   "license": "MIT",
   "engines": {
     "node": ">=16.0.0",
     "pnpm": ">=8.0.0"
+  },
+  "dependencies": {
+    "dayjs": "^1.11.18",
+    "vant": "^4.9.21"
+  },
+  "devDependencies": {
+    "@vant/auto-import-resolver": "^1.3.0"
   }
 }

packages/mobile/src/views/EquipmentManagement.vue

@@ -45,7 +45,7 @@
       添加设备
     </van-button>
 
-    <!-- 弹出层 -->
+    <!-- 添加设备弹窗 -->
     <van-popup
       :show="showPopup"
       position="bottom"
@@ -54,9 +54,188 @@
       :style="{ height: '80%' }"
       @close="onPopupClose"
     >
-      <div class="popup-content">
-        <h3>添加新设备</h3>
-      </div>
+      <!-- 表单部分 -->
+      <van-form class="device-form" @submit="handleSubmit">
+        <h3>设备信息</h3>
+
+        <!-- 设备名称 -->
+        <van-field
+          v-model="form.deviceName"
+          label="设备名称"
+          placeholder="请输入设备名称"
+          :rules="[{ required: true, message: '请填写设备名称' }]"
+        >
+          <template #button>
+            <span class="counter">{{ form.deviceName.length }}/20</span>
+          </template>
+        </van-field>
+
+        <!-- 设备大类 -->
+        <van-field
+          v-model="form.category"
+          is-link
+          arrow-direction="down"
+          readonly
+          label="设备大类"
+          placeholder="请选择设备大类"
+          @click="showCategoryPicker = true"
+        />
+
+        <!-- 设备类型 -->
+        <van-field
+          v-model="form.type"
+          is-link
+          arrow-direction="down"
+          readonly
+          label="设备类型"
+          placeholder="请选择设备类型"
+          @click="showTypePicker = true"
+        />
+
+        <!-- 设备型号 -->
+        <van-field
+          v-model="form.model"
+          label="设备型号"
+          placeholder="请输入设备型号"
+          :rules="[{ required: true, message: '请填写设备型号' }]"
+        />
+
+        <!-- 设备经度 -->
+        <van-field
+          v-model="form.lon"
+          label="设备经度"
+          placeholder="请输入设备经度"
+          :rules="[{ required: true, message: '请填写设备经度' }]"
+        />
+
+        <!-- 设备纬度 -->
+        <van-field
+          v-model="form.lat"
+          label="设备纬度"
+          placeholder="请输入设备纬度"
+          :rules="[{ required: true, message: '请填写设备纬度' }]"
+        />
+
+        <!-- 设备管理员 -->
+        <van-field
+          v-model="form.admin"
+          is-link
+          arrow-direction="down"
+          readonly
+          label="设备管理员"
+          placeholder="请选择设备管理员"
+          @click="showAdminPicker = true"
+        />
+
+        <!-- 操作员 -->
+        <van-field
+          v-model="form.operator"
+          is-link
+          arrow-direction="down"
+          readonly
+          label="操作员"
+          placeholder="请选择操作员"
+          @click="showOperatorPicker = true"
+        />
+
+        <!-- 购置日期 -->
+        <van-field
+          v-model="form.time"
+          is-link
+          arrow-direction="down"
+          readonly
+          label="购置日期"
+          placeholder="请选择日期"
+          @click="showTimePicker = true"
+        />
+
+        <!-- 选择器弹窗 -->
+        <!-- 设备大类弹窗 -->
+        <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>
+
+        <div style="margin: 32px 16px">
+          <van-button round block type="primary" native-type="submit">
+            保存
+          </van-button>
+        </div>
+      </van-form>
     </van-popup>
   </div>
 </template>
@@ -81,6 +260,80 @@ const handleAddDevice = () => {
 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);
+
+const categoryOptions = [
+  { text: "分类1", value: "分类1" },
+  { text: "分类2", value: "分类2" },
+  { text: "分类3", value: "分类3" },
+];
+const typeOptions = [
+  { text: "分类1", value: "分类1" },
+  { text: "分类2", value: "分类2" },
+  { text: "分类3", value: "分类3" },
+];
+
+const onCategoryConfirm = (value) => {
+  form.value.category = value.selectedValues[0];
+  showCategoryPicker.value = false;
+};
+const onTypeConfirm = (value) => {
+  form.value.type = value.selectedValues[0];
+  showTypePicker.value = false;
+};
+// 设备管理员
+const showAdminPicker = ref(false);
+const adminOptions = [
+  { text: "管理员1", value: "管理员1" },
+  { text: "管理员2", value: "管理员2" },
+  { text: "管理员3", value: "管理员3" },
+];
+const onAdminConfirm = (value) => {
+  form.value.admin = value.selectedValues[0];
+  showAdminPicker.value = false;
+};
+// 操作员
+const showOperatorPicker = ref(false);
+const operatorOptions = [
+  { text: "操作员1", value: "操作员1" },
+  { text: "操作员2", value: "操作员2" },
+  { text: "操作员3", value: "操作员3" },
+];
+const operatorConfirm = (value) => {
+  form.value.operator = value.selectedValues[0];
+  showOperatorPicker.value = false;
+};
+
+// 购置日期
+const showTimePicker = ref(false);
+const currentDate = ref([
+  new Date().getFullYear(),
+  new Date().getMonth() + 1,
+  new Date().getDate(),
+]);
+// 添加日期确认处理
+const onDateConfirm = ({ selectedValues }) => {
+  form.value.time = selectedValues.join("-");
+  showTimePicker.value = false;
+};
+
+const handleSubmit = () => {
+  showToast("提交成功");
+  showPopup.value = false;
+};
 </script> 
   
   <style scoped>
@@ -134,5 +387,9 @@ const onPopupClose = () => {
 .status-danger {
   background-color: #ee0a24;
 }
+
+.device-form {
+  padding: 16px;
+}
 </style>
   

pnpm-lock.yaml

@@ -6,7 +6,18 @@ settings:
 
 importers:
 
-  .: {}
+  .:
+    dependencies:
+      dayjs:
+        specifier: ^1.11.18
+        version: 1.11.18
+      vant:
+        specifier: ^4.9.21
+        version: 4.9.21(vue@3.5.22)
+    devDependencies:
+      '@vant/auto-import-resolver':
+        specifier: ^1.3.0
+        version: 1.3.0
 
   packages/mobile:
     dependencies:
@@ -471,6 +482,9 @@ packages:
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
+  '@vant/auto-import-resolver@1.3.0':
+    resolution: {integrity: sha512-lJyWtCyFizR4bHZvMiNMF3w+WTFTUWAvka1eqTnPK9ticUcKTCOx6qEmHcm8JPb3g1t3GaD2W3MnHkBp/nHamw==}
+
   '@vant/popperjs@1.3.0':
     resolution: {integrity: sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw==}
 
@@ -578,6 +592,9 @@ packages:
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
+  dayjs@1.11.18:
+    resolution: {integrity: sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA==}
+
   debug@4.4.3:
     resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
     engines: {node: '>=6.0'}
@@ -1278,6 +1295,8 @@ snapshots:
 
   '@types/estree@1.0.8': {}
 
+  '@vant/auto-import-resolver@1.3.0': {}
+
   '@vant/popperjs@1.3.0': {}
 
   '@vant/use@1.6.0(vue@3.5.22)':
@@ -1411,6 +1430,8 @@ snapshots:
 
   csstype@3.1.3: {}
 
+  dayjs@1.11.18: {}
+
   debug@4.4.3:
     dependencies:
       ms: 2.1.3