bxztApp/packages/mobile/src/views/IceEvent/IceEventAdd.vue

<template>
  <div class="home">
    <van-nav-bar title="冰雪填报" fixed left-arrow @click-left="onClickLeft">
    </van-nav-bar>
    <van-cell-group>
      <van-cell title="当前站点" :value="yhzDetail.mc" />
    </van-cell-group>

    <div class="content">
      <h3>基本信息</h3>
      <van-form class="IceEventAddForm" label-align="left" colon>
        <van-field v-model="form.event.occurTime" label="发生时间" center>
          <template #button>
            <van-button
              plain
              round
              type="primary"
              size="mini"
              @click="getCurrentTime"
              >校准时间</van-button
            >
          </template>
        </van-field>
        <van-field
          v-model="form.event.occurLocation"
          label="发生地点"
          center
          placeholder="请填写"
        />
        <van-field
          v-model="form.event.routeNo"
          label="线路编号"
          center
          placeholder="请填写"
        />
        <van-field
          v-model="form.event.startStakeNo"
          label="起点桩号"
          center
          placeholder="请填写"
        />
        <van-field
          v-model="form.event.endStakeNo"
          label="止点桩号"
          center
          placeholder="请填写"
        />
        <van-field
          v-model="form.event.disasterMileage"
          label="受灾里程"
          center
          type="number"
          placeholder="请填写"
        />
      </van-form>
      <h3>处置情况</h3>
      <van-form class="IceEventAddForm" label-align="left" colon>
        <van-field label="处置措施" center>
          <template #input>
            <div class="disposal-buttons">
              <van-button
                plain
                :type="
                  form.event.disposalMeasures === '限速通行'
                    ? 'primary'
                    : 'default'
                "
                size="small"
                @click="toggleDisposal('限速通行')"
              >
                限速通行
              </van-button>
              <van-button
                plain
                :type="
                  form.event.disposalMeasures === '封闭交通'
                    ? 'primary'
                    : 'default'
                "
                size="small"
                @click="toggleDisposal('封闭交通')"
                class="last-button"
              >
                封闭交通
              </van-button>
            </div>
          </template>
        </van-field>
        <van-field
          v-model="form.event.expectRecoverTime"
          label="预计恢复时间"
          center
          placeholder="请选择"
          readonly
          clickable
          @click="showExpectPicker = true"
        />
        <van-popup
          :show="showExpectPicker"
          round
          position="bottom"
          close-on-click-overlay
          @close="showExpectPicker = false"
        >
          <van-picker-group
            title="选择日期时间"
            :tabs="['选择日期', '选择时间']"
            @confirm="handleConfirmExpectTime"
            @cancel="showExpectPicker = false"
          >
            <van-date-picker
              v-model="expectDate"
              :min-date="minDate"
              :max-date="maxDate"
            />
            <van-time-picker v-model="expectTime" />
          </van-picker-group>
        </van-popup>
      </van-form>
      <h3>实施情况</h3>
      <van-form class="IceEventAddForm" label-align="left" colon>
        <van-field
          v-model="form.material.inputManpower"
          type="number"
          label="投入人力"
          center
          placeholder="请填写"
        >
          <template #extra> 人次 </template>
        </van-field>
        <van-field
          v-model="form.material.inputFunds"
          type="number"
          label="投入资金"
          center
          placeholder="请填写"
        >
          <template #extra> 万元 </template>
        </van-field>
        <van-field
          v-model="form.material.inputEquipment"
          type="number"
          label="投入设备"
          center
          placeholder="请填写"
        >
          <template #extra> 台班 </template>
        </van-field>

        <!-- 选择物资列表 -->
        <van-field
          v-for="(material, index) in form.yhzMaterialList"
          :key="material.rid"
          v-model="material.usageAmount"
          type="number"
          :label="material.wzmc"
          center
          placeholder="请输入数量"
        >
          <template #extra>
            <span style="margin-right: 10px">{{ material.dw }}</span>
            <van-button
              size="small"
              type="danger"
              @click.stop="form.yhzMaterialList.splice(index, 1)"
            >
              删除
            </van-button>
          </template>
        </van-field>

        <van-button
          class="add-wzbtn"
          type="primary"
          icon="plus"
          plain
          @click="handleOpenAddMaterial"
          >添加物资
        </van-button>
        <van-popup
          :show="showAddMaterialPopup"
          position="bottom"
          close-on-click-overlay
          @close="showAddMaterialPopup = false"
        >
          <div style="padding: 16px">
            <h3 style="text-align: center; margin-bottom: 16px">添加物资</h3>

            <!-- 搜索框 -->
            <van-field
              v-model="searchText"
              placeholder="输入物资名称搜索"
              clearable
              @update:model-value="handleSearch"
            >
            </van-field>

            <van-checkbox-group v-model="checked">
              <van-cell-group inset style="margin: 16px 0">
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    padding: 8px 16px;
                  "
                >
                  <span>共 {{ materialList.length }} 项</span>
                  <van-button
                    size="mini"
                    @click="toggleSelectAll"
                    :type="isAllSelected ? 'primary' : 'default'"
                  >
                    {{ isAllSelected ? "取消全选" : "全选" }}
                  </van-button>
                </div>
                <van-cell
                  v-for="(item, index) in materialList"
                  clickable
                  :key="item.rid"
                  :title="item.wzmc"
                  @click="toggle(index)"
                >
                  <template #right-icon>
                    <van-checkbox
                      :name="item.rid"
                      :ref="(el) => (checkboxRefs[index] = el)"
                      @click.stop
                    />
                  </template>
                </van-cell>
              </van-cell-group>
            </van-checkbox-group>

            <van-button
              type="primary"
              block
              @click="addSelectedMaterials"
              style="margin-top: 10px"
            >
              确认添加
            </van-button>
          </div>
        </van-popup>

        <van-field label="当前通行情况" center>
          <template #input>
            <div class="disposal-buttons">
              <van-button
                plain
                :type="form.traffic.currentStatus === 1 ? 'primary' : 'default'"
                size="small"
                @click="form.traffic.currentStatus = 1"
              >
                正常通行
              </van-button>
              <van-button
                plain
                :type="form.traffic.currentStatus === 2 ? 'primary' : 'default'"
                size="small"
                @click="form.traffic.currentStatus = 2"
              >
                限速通行
              </van-button>
              <van-button
                plain
                :type="form.traffic.currentStatus === 3 ? 'primary' : 'default'"
                size="small"
                @click="form.traffic.currentStatus = 3"
                class="last-button"
              >
                封闭交通
              </van-button>
            </div>
          </template>
        </van-field>
        <van-field label="有无车辆滞留" center>
          <template #input>
            <div class="disposal-buttons">
              <van-button
                plain
                :type="
                  form.traffic.hasStrandedVehicles === 1 ? 'primary' : 'default'
                "
                size="small"
                @click="form.traffic.hasStrandedVehicles = 1"
              >
                有滞留
              </van-button>
              <van-button
                plain
                :type="
                  form.traffic.hasStrandedVehicles === 0 ? 'primary' : 'default'
                "
                size="small"
                @click="
                  form.traffic.hasStrandedVehicles = 0;
                  form.traffic.strandedVehicleCount = null;
                "
                class="last-button"
              >
                无滞留
              </van-button>
            </div>
          </template>
        </van-field>
        <van-field
          v-if="form.traffic.hasStrandedVehicles === 1"
          v-model="form.traffic.strandedVehicleCount"
          type="number"
          label="滞留车辆数"
          center
          placeholder="请填写"
        />

        <van-field
          v-model="form.traffic.actualRecoverTime"
          label="实际恢复时间"
          center
          placeholder="请选择"
          readonly
          clickable
          @click="showActualPicker = true"
        />
        <van-popup
          :show="showActualPicker"
          round
          position="bottom"
          close-on-click-overlay
          @close="showActualPicker = false"
        >
          <van-picker-group
            title="选择日期时间"
            :tabs="['选择日期', '选择时间']"
            @confirm="handleConfirmActualTime"
            @cancel="showActualPicker = false"
          >
            <van-date-picker
              v-model="actualDate"
              :min-date="minDate"
              :max-date="maxDate"
            />
            <van-time-picker v-model="actualTime" />
          </van-picker-group>
        </van-popup>

        <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-form>
    </div>

    <van-button type="primary" class="add-btn" icon="plus" @click="handleAdd">
      填报
    </van-button>
  </div>
</template>
      
      <script setup>
import "vant/es/toast/style";
import "vant/es/popup/style";
import { ref, onMounted, reactive, toRaw, watch, computed } 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 yhzDetail = ref({}); // 养护站详情数据
const INIT_FORM = reactive({
  event: {
    occurLocation: "", // 发生地点
    routeNo: "", // 线路编号
    occurTime: "", // 发生时间
    startStakeNo: "", // 起点桩号
    endStakeNo: "", // 止点桩号
    disasterMileage: "", // 受灾里程
    expectRecoverTime: "", // 预计恢复时间
    actualRecoverTime: "", // 实际恢复时间
    serviceStationId: "", // 养护站ID
    district: "", // 所属区县
    reportTime: "", // 填报时间
    reporterPhone: "", // 填报人手机号
    disposalMeasures: "", // 处置措施
    createTime: "", // 创建时间
    updateTime: "", // 更新时间
    isDeleted: "", // 是否删除 0-未删除 1-已删除
  },
  material: {
    inputManpower: null, // 投入人力
    inputFunds: null, // 投入资金
    inputEquipment: null, // 投入设备
    createTime: "", // 创建时间
    updateTime: "", // 更新时间
  },
  traffic: {
    currentStatus: 0, // 当前通行情况 1-正常通行 2-限速通行 3-封闭交通
    hasStrandedVehicles: 0, // 是否有车辆滞留 0-无 1-有
    strandedVehicleCount: null, // 车辆滞留数量
    actualRecoverTime: "", // 实际恢复时间
    createTime: "", // 创建时间
    updateTime: "", // 更新时间
  },
  yhzMaterialList: [], // 养护站物资列表
  photos: [],
});
const form = reactive({ ...INIT_FORM });
const fileList = ref([]);

// 日期格式化
const formatTime = (date = new Date()) => {
  const pad = (n) => n.toString().padStart(2, "0");
  return (
    `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(
      date.getDate()
    )} ` +
    `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(
      date.getSeconds()
    )}`
  );
};

const getCurrentTime = () => {
  form.event.occurTime = formatTime();
};

const toggleDisposal = (type) => {
  form.event.disposalMeasures =
    form.event.disposalMeasures === type ? "" : type;
};

// 组件挂载时获取数据
onMounted(() => {
  yhzDetail.value = JSON.parse(decodeURIComponent(route.params.data));
  console.log("yhzDetail", toRaw(yhzDetail.value));
  form.event.occurTime = formatTime(); // 初始化为当前时间
});

const onClickLeft = () => {
  router.push({
    name: "IceEventManage",
    params: { data: encodeURIComponent(JSON.stringify(yhzDetail.value)) },
  });
};

// 添加物资相关
const showAddMaterialPopup = ref(false);
const materialList = ref([]);
const checkboxRefs = ref([]);
const checked = ref([]);
const toggle = (index) => {
  checkboxRefs.value[index].toggle();
};

const searchText = ref("");
const handleSearch = () => {
  getMaterialList(searchText.value);
};
// 全选功能
const toggleSelectAll = () => {
  if (isAllSelected.value) {
    checked.value = [];
  } else {
    checked.value = materialList.value.map((item) => item.rid);
  }
};
// 计算是否全选
const isAllSelected = computed(() => {
  return (
    materialList.value.length > 0 &&
    materialList.value.every((item) => checked.value.includes(item.rid))
  );
});

// 添加物资到表单
const addSelectedMaterials = () => {
  checked.value.forEach((rid) => {
    const material = materialList.value.find((m) => m.rid === rid);
    if (material && !form.yhzMaterialList.some((m) => m.rid === rid)) {
      form.yhzMaterialList.push({
        rid: rid,
        wzmc: material.wzmc,
        usageAmount: null,
        dw: material.dw,
      });
    }
  });
  showAddMaterialPopup.value = false;
  checked.value = [];
};

// 查询物资列表
const getMaterialList = async (wzmc) => {
  try {
    const data = {
      yhzid: yhzDetail.value.id,
      wzmc,
      pageNum: 1,
      pageSize: 9999,
    };
    const res = await request({
      url: "/snow-ops-platform/yjwz/list",
      method: "GET",
      params: data,
    });
    if (res.code === "00000") {
      materialList.value = res.data.records;
    } else {
      throw new Error(res.message);
    }
  } catch (error) {
    showToast({
      type: "fail",
      message: error.message,
    });
  }
};

// 打开添加物资弹窗
const handleOpenAddMaterial = async () => {
  await getMaterialList();
  showAddMaterialPopup.value = true;
};

const handleAdd = async () => {
  try {
    const toast = showLoadingToast({
      message: "上报中...",
      forbidClick: true,
      duration: 0, // 设置为0表示不会自动关闭
    });
    form.event.serviceStationId = yhzDetail.value.id;
    form.event.district = yhzDetail.value.qxmc;
    console.log("yhzDetail", toRaw(yhzDetail.value));
    console.log("form", toRaw(form));
    const res = await request({
      url: "/snow-ops-platform/event/add",
      method: "POST",
      data: form,
    });
    if (res.code === "00000") {
      toast.close();
      showToast({
        type: "success",
        message: "上报成功",
      });
      router.push({
        name: "IceEventManage",
        params: { data: encodeURIComponent(JSON.stringify(yhzDetail.value)) },
      });
    } else {
      throw new Error(res.message);
    }
  } catch (error) {
    toast.close();
    showToast({
      type: "fail",
      message: error.message,
    });
  }
};

const expectDate = ref([]);
const expectTime = ref([]);
const actualDate = ref([]);
const actualTime = ref([]);

// 预计恢复时间相关
const showExpectPicker = ref(false);
const minDate = new Date();
const maxDate = new Date(2050, 11, 31);
const handleConfirmExpectTime = () => {
  const [year, month, day] = expectDate.value;
  const [hour, minute] = expectTime.value;
  form.event.expectRecoverTime = `${year}-${month.padStart(
    2,
    "0"
  )}-${day.padStart(2, "0")} ${hour.padStart(2, "0")}:${minute.padStart(
    2,
    "0"
  )}:00`;
  showExpectPicker.value = false;
};
// 实际恢复时间相关
const showActualPicker = ref(false);
const handleConfirmActualTime = () => {
  const [year, month, day] = actualDate.value;
  const [hour, minute] = actualTime.value;
  form.traffic.actualRecoverTime = `${year}-${month.padStart(
    2,
    "0"
  )}-${day.padStart(2, "0")} ${hour.padStart(2, "0")}:${minute.padStart(
    2,
    "0"
  )}:00`;
  showActualPicker.value = false;
};

// 在打开选择器时设置初始值
watch(showExpectPicker, (val) => {
  if (val) {
    const current = form.event.expectRecoverTime
      ? new Date(form.event.expectRecoverTime)
      : new Date();
    expectDate.value = [
      current.getFullYear(),
      current.getMonth() + 1,
      current.getDate(),
    ];
    expectTime.value = [current.getHours(), current.getMinutes()];
  }
});
watch(showActualPicker, (val) => {
  if (val) {
    const current = form.traffic.actualRecoverTime
      ? new Date(form.traffic.actualRecoverTime)
      : new Date();
    actualDate.value = [
      current.getFullYear(),
      current.getMonth() + 1,
      current.getDate(),
    ];
    actualTime.value = [current.getHours(), current.getMinutes()];
  }
});

// 文件上传
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 handleDelete = (file) => {
  if (file.serverUrl) {
    const index = form.photos.findIndex((p) => p.photoUrl === file.serverUrl);
    if (index !== -1) {
      form.photos.splice(index, 1);
    }
  }
};
</script> 
      
      <style scoped>
.home {
  padding-top: var(--van-nav-bar-height); /* 自动匹配导航栏高度 */
}

.content {
  padding: 16px 16px 80px 16px;
}

.content .van-cell-group .van-cell {
  margin-bottom: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.add-wzbtn {
  width: calc(100% - 32px);
  margin: 10px 16px;
}

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

.IceEventAddForm {
  padding: 16px 16px 16px 16px;
}

.disposal-buttons {
  display: flex;
  gap: 10px;
  padding: 8px 0;
}
.disposal-buttons .van-button {
  flex: 1;
}
.last-button {
  margin-right: 16px;
}
</style>