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

<template>
  <div class="home">
    <van-nav-bar title="设备管理" fixed left-arrow @click-left="onClickLeft">
    </van-nav-bar>
    <van-search
      shape="round"
      :value="searchValue"
      :show-action="false"
      placeholder="请输入设备名称"
    />
    <van-cell-group>
      <van-cell title="当前站点" value="李家坝仓库" />
    </van-cell-group>

    <div class="content">
      <van-cell-group>
        <van-cell
          v-for="(item, index) in equipmentList"
          :key="index"
          :title="item.title"
          is-link
          :label="item.label"
          :to="{
            name: 'EquipDetail',
            params: { data: encodeURIComponent(JSON.stringify(item)) },
          }"
        >
          <template #value>
            <span :class="['status-tag', item.statusClass]">{{
              item.status
            }}</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" @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>
  
  <script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { showToast } from "vant";

const router = useRouter();
const searchValue = ref(""); // 搜索框输入值
const equipmentList = ref([
  {
    title: "高枝锯、绿篱机、油锯",
    label: "设备类型： 绿化修剪设备",
    status: "完好",
    statusClass: "status-good",
  },
  {
    title: "撒布机三台",
    label: "设备类型：除雪设备",
    status: "损坏",
    statusClass: "status-warning",
  },
  {
    title: "撒布机三台",
    label: "设备类型：除雪设备",
    status: "报废",
    statusClass: "status-danger",
  },
]);
const showPopup = ref(false); // 控制弹出层显示隐藏

const onClickLeft = () => {
  router.push("/");
};

const handleAddDevice = () => {
  showPopup.value = true;
};

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>
.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;
}
</style>