bxztApp/packages/mobile/src/views/Material/MaterialDetails.vue

<template>
  <div class="home">
    <van-nav-bar title="物资管理" fixed left-arrow @click-left="onClickLeft" />

    <van-cell-group>
      <van-cell title="当前站点" :value="yhzDetail.mc" />
    </van-cell-group>

    <div class="content" v-if="wzDetailData">
      <van-cell-group>
        <van-cell
          title="物资信息"
          style="font-size: 18px; font-weight: bold; line-height: inherit"
        >
        </van-cell>
        <van-cell :title="'物资名称： ' + wzDetailData.wzmc">
          <template #right-icon>
            <van-image
              :src="photos[0]?.photoUrl"
              fit="cover"
              width="100px"
              @click="showImage(photos)"
            ></van-image>
          </template>
        </van-cell>
        <van-cell
          v-if="!isConfirm"
          :title="'余量： ' + wzDetailData.ye + ' ' + wzDetailData.dw"
        >
        </van-cell>
        <van-cell
          v-if="isConfirm"
          :title="'数量： ' + wzDetailData.sl + ' ' + wzDetailData.dw"
        >
        </van-cell>
        <van-cell :title="'物资经度： ' + wzDetailData.jd"> </van-cell>
        <van-cell :title="'物资纬度： ' + wzDetailData.wd"> </van-cell>
        <van-cell :title="'负责人： ' + wzDetailData.fzr"> </van-cell>
        <van-cell
          :title="'入库日期： ' + (wzDetailData.rkrq?.split(' ')[0] || '')"
        >
        </van-cell>
        <van-cell :title="'所属养护站： ' + wzDetailData.yhzMc"> </van-cell>
        <van-cell :title="'备注： ' + wzDetailData.remark"> </van-cell>
      </van-cell-group>

      <van-popup
        :show="showRemarkPopup"
        position="bottom"
        closeable
        close-on-click-overlay
        :style="{ height: '30%' }"
        @close="onRemarkPopupClose"
      >
        <div
          style="
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 0 16px;
          "
        >
          <h1
            style="
              margin: 0 0 12px 0;
              font-size: 18px;
              color: #333;
              text-align: center;
            "
          >
            备注信息
          </h1>
          <van-field
            v-model="editForm.material.remark"
            placeholder="请输入备注"
            style="
              width: 100%;
              margin-bottom: 16px;
              border-radius: 8px;
              background: #f7f8fa;
            "
          />
          <div style="display: flex; gap: 20px; width: 100%">
            <van-button
              type="default"
              style="flex: 1; border-radius: 8px"
              @click="onRemarkPopupClose"
            >
              取消
            </van-button>
            <van-button
              type="primary"
              style="flex: 1; border-radius: 8px"
              @click="onRemarkConfirm"
            >
              确认
            </van-button>
          </div>
        </div>
      </van-popup>
    </div>
    <van-tabbar v-if="isConfirm">
      <van-tabbar-item>
        <template #default>
          <div class="button-box">
            <van-button
              type="warning"
              style="width: 50%; border-radius: 10px"
              @click="notYHZPopupOpen"
            >
              不是本站点设备
            </van-button>
            <van-button
              type="primary"
              style="width: 50%; border-radius: 10px"
              @click="addToThisYHZPopupOpen"
            >
              添加到服务站
            </van-button>
          </div>
        </template>
      </van-tabbar-item>
    </van-tabbar>
    <van-tabbar v-else>
      <van-tabbar-item>
        <template #default>
          <van-button
            type="primary"
            style="width: 100%; border-radius: 10px; display: block"
            @click="handleRemarkOpen"
          >
            备注
          </van-button>
        </template>
      </van-tabbar-item>
    </van-tabbar>

    <van-popup
      :show="notYHZPopup"
      position="bottom"
      closeable
      close-on-click-overlay
      :style="{ height: '20%' }"
      @close="notYHZPopupClose"
    >
      <div
        style="
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 0 16px;
        "
      >
        <h1
          style="
            margin: 0 0 20px 0;
            font-size: 18px;
            color: #333;
            text-align: center;
          "
        >
          确认不是本站点物资？
        </h1>

        <div style="display: flex; gap: 20px; width: 100%">
          <van-button
            type="default"
            style="flex: 1; border-radius: 8px"
            @click="notYHZPopupClose"
          >
            取消
          </van-button>
          <van-button
            type="primary"
            style="flex: 1; border-radius: 8px"
            @click="notYHZConfirm"
          >
            确认
          </van-button>
        </div>
      </div>
    </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="addToThisYHZPupup"
      position="bottom"
      closeable
      close-on-click-overlay
      @close="addToThisYHZPopupClose"
    >
      <div
        style="
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 0 16px;
        "
      >
        <h1
          v-if="wzDetailData.fzr && wzDetailData.fzrid"
          style="
            margin: 20px 0 20px 0;
            font-size: 18px;
            color: #333;
            text-align: center;
          "
        >
          确认添加
        </h1>

        <div v-else>
          <h1
            style="
              margin: 20px 0 20px 0;
              font-size: 18px;
              color: #333;
              text-align: center;
            "
          >
            添加到服务站
          </h1>
          <!-- 负责人 -->
          <van-field
            v-model="editForm.material.fzr"
            is-link
            arrow-direction="down"
            readonly
            label="负责人"
            placeholder="请选择负责人"
            @click="showAdminPicker = true"
          />
          <van-field v-model="editForm.material.remark" label="备注(非必填)">
          </van-field>
          <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>
        </div>

        <div style="display: flex; gap: 20px; width: 100%">
          <van-button
            type="default"
            style="flex: 1; border-radius: 8px"
            @click="addToThisYHZPopupClose"
          >
            取消
          </van-button>
          <van-button
            type="primary"
            style="flex: 1; border-radius: 8px"
            @click="AddToThisTHZConfirm"
          >
            确认
          </van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>
    
    <script setup>
import { ref, onMounted, toRaw, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { showToast, showLoadingToast, showImagePreview } from "vant";
import { request } from "../../../../shared/utils/request";

const router = useRouter();
const route = useRoute();

const yhzDetail = ref({});
const wzData = ref([]);
const wzDetailData = ref(); // 物资详情数据
const photos = ref([]); // 物资图片数据
const isConfirm = ref(false); // 是否是在确认物资
const editForm = reactive({});

onMounted(() => {
  const data = JSON.parse(decodeURIComponent(route.params.data));
  yhzDetail.value = data.yhzDetail;
  wzData.value = data.material;
  isConfirm.value = data.isConfirm;
  console.log("传递过来的参数:", data);
  getwzDetail();
});

// 获取物资详情
const getwzDetail = async () => {
  try {
    const res = await request({
      url: `/snow-ops-platform/yjwz/getById?rid=${wzData.value.rid}`,
      method: "GET",
    });
    if (res.code && res.code === "00000") {
      wzDetailData.value = res.data.material;
      // console.log('wzDetailData',toRaw(wzDetailData.value));
      photos.value = res.data.photos;
    } else {
      throw new Error(res.message);
    }
  } catch (error) {
    showToast({
      message: error.message,
      type: "error",
    });
    console.log("error", error);
  }
};

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

const showImage = (photos) => {
  const photosArr = photos.map((item) => item.photoUrl);
  showImagePreview({
    images: photosArr,
    closeable: true,
  });
};

// 编辑备注相关
const showRemarkPopup = ref(false);
const handleRemarkOpen = () => {
  editForm.material = JSON.parse(JSON.stringify(wzDetailData.value));
  editForm.photos = [...photos.value];
  showRemarkPopup.value = true;
};
const onRemarkPopupClose = () => {
  getwzDetail();
  showRemarkPopup.value = false;
};
const onRemarkConfirm = async () => {
  try {
    const res = await request({
      url: `/snow-ops-platform/yjwz/update`,
      method: "POST",
      data: editForm,
    });
    if (res.code && res.code === "00000") {
      showToast({
        message: "备注信息保存成功",
        type: "success",
      });
      onRemarkPopupClose();
    } else {
      throw new Error(res.message);
    }
  } catch (error) {
    showToast({
      message: error.message,
      type: "fail",
    });
  }
};

// 确认物资相关
const notYHZPopup = ref(false);
const notYHZPopupOpen = () => {
  notYHZPopup.value = true;
};
const notYHZPopupClose = () => {
  notYHZPopup.value = false;
};
const notYHZConfirm = async () => {
  try {
    const res = await request({
      url: "/snow-ops-platform/yjwz/confirm",
      method: "POST",
      data: {
        rid: wzDetailData.value.rid,
        confirmType: 2, // 确认类型 1-确认添加到本站，2-拒绝
      },
    });
    if (res.code === "00000") {
      router.push({
        name: "MaterialManage",
        params: { data: encodeURIComponent(JSON.stringify(yhzDetail.value)) },
      });
    } else {
      throw new Error(res.message);
    }
  } catch (error) {
    showToast({ type: "fail", message: error.message || "操作失败" });
  }
};

const addToThisYHZPupup = ref(false);
const adminOptions = ref([]); // 负责人选项
// 获取养护站人员列表
const getPersonList = async () => {
  try {
    const data = {
      pageNum: 1,
      pageSize: 9999,
      yhzid: yhzDetail.value.id,
    };
    const res = await request({
      url: "/snow-ops-platform/yhzry/list",
      method: "get",
      params: data,
    });
    if (res.code === "00000") {
      adminOptions.value = res.data.records.map((item) => ({
        text: item.xm,
        value: item.userId,
      }));
    } else {
      throw new Error("人员信息获取失败");
    }
  } catch (error) {
    console.log(error);
    showToast({
      type: "fail",
      message: error.message,
    });
  }
};
// 负责人
const showAdminPicker = ref(false);
const onAdminConfirm = (value) => {
  const selectedOption = adminOptions.value.find(
    (opt) => opt.value === value.selectedValues[0]
  );
  if (selectedOption) {
    editForm.material.fzr = selectedOption.text;
    editForm.material.fzrid = selectedOption.value;
  }
  showAdminPicker.value = false;
};
const addToThisYHZPopupOpen = async () => {
  await getPersonList();
  editForm.material = JSON.parse(JSON.stringify(wzDetailData.value));
  editForm.photos = [...photos.value];
  fileList.value = photos.value.map((photo) => ({
    url: photo.photoUrl,
    status: "done",
    message: "上传成功",
    serverUrl: photo.photoUrl,
  }));
  addToThisYHZPupup.value = true;
};
const addToThisYHZPopupClose = () => {
  addToThisYHZPupup.value = false;
};

const AddToThisTHZConfirm = async () => {
  if (!wzDetailData.value.fzr || !wzDetailData.value.fzrid) {
    await onRemarkConfirm();
  }
  try {
    const data = {
      rid: wzDetailData.value.rid,
      confirmType: 1, // 确认类型 1-确认添加到本站，2-拒绝
    };
    const res = await request({
      url: "/snow-ops-platform/yjwz/confirm",
      method: "POST",
      data,
    });
    if (res.code === "00000") {
      showToast({
        message: "操作成功",
        type: "success",
      });
      addToThisYHZPopupClose();
      router.push({
        name: "MaterialManage",
        params: { data: encodeURIComponent(JSON.stringify(yhzDetail.value)) },
      });
    } else {
      throw new Error(res.message);
    }
  } catch (error) {
    showToast({
      type: "fail",
      message: error.message || "操作失败",
    });
  }
};

// 上传文件相关
const fileList = ref([]);
// 文件删除
const handleDelete = (file) => {
  if (file.serverUrl) {
    const index = editForm.photos.findIndex(
      (p) => p.photoUrl === file.serverUrl
    );
    if (index !== -1) {
      editForm.photos.splice(index, 1);
    }
  }
};

// 文件上传
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") {
      editForm.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("editForm.photos", toRaw(editForm.photos));
      console.log("fileList.value", fileList.value);
    } else {
      throw new Error(res.message);
    }
  } catch (error) {
    toast.close();
    showToast({
      type: "fail",
      message: error.message,
    });
  }
};
</script>
    
    <style scoped>
.home {
  padding-top: var(--van-nav-bar-height); /* 自动匹配导航栏高度 */
}

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

.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;
}
:deep(.van-tabbar-item__text) {
  width: 90%;
  display: block;
}
.button-box {
  display: flex;
  justify-content: center;
  width: 100%;
  gap: 20px;
}
</style>