pms-app/pages/inspection/edit.vue

<template>
  <view class="page inspection">
    <uni-nav-bar
      dark
      :fixed="true"
      :border="false"
      background-color="#004098"
      status-bar
      left-icon="left"
      :title="$t('inspection.editWorkOrder')"
      @clickLeft="navigatorBack()"
    />
    <template v-if="details.length > 0">
      <view class="page-top">
        <view class="top-content flex-row justify-between align-center">
          <view class="align-end">
            {{ details[currentTab].deviceName }}
          </view>
          <view class="align-end">
            <!-- 当前设备tab·所有步骤列表·当前步骤·indexId -->
            <span class="align-end" style="font-size: 24px">
              {{
                details[currentTab].allStepsList[
                  details[currentTab].currentStep
                ].indexId
              }}
            </span>
            <span class="align-end"
              >/{{ details[currentTab].allStepsList.length }}</span
            >
          </view>
        </view>
      </view>
      <view class="page-content">
        <scroll-view
          class="tabs-container"
          :scroll-x="true"
          :scroll-left="tabScrollLeft"
          scroll-with-animation
          ref="scrollContainerRef"
        >
          <uv-tabs
            ref="tabsRef"
            :current="currentTab"
            :list="tabs"
            :line-color="'#0082CC'"
            :active-style="{ color: '#004098', fontWeight: '600' }"
            @click="onClickItem"
          >
          </uv-tabs>
          <uni-segmented-control
            ref="segmentedControlRef"
            class="justify-start"
            :current="currentTab"
            :values="tabs"
            :style-type="'text'"
            :active-color="'#0082CC'"
            @clickItem="onClickItem"
            v-if="false"
          >
          </uni-segmented-control>
        </scroll-view>
        <swiper
          class="swiper-container"
          :current="currentTab"
          duration="100"
          @change="onSwiperChanged($event)"
        >
          <swiper-item v-for="detail in details">
            <view class="step-section">
              <!-- 点击查看巡检项目 -->
              <view class="step-all" @click="allStepShow">
                {{ $t("inspection.clickView") }}
                {{ detail.deviceName }}
                {{ $t("inspection.proj") }}
                <view class="border"></view>
              </view>
              <!-- 巡检项 -->
              <view class="step-form">
                <view class="step-title">
                  {{ currentStepInfo.item }}
                  <view class="border"></view>
                </view>
                <!-- 巡检标准 -->
                <view class="step-standard">
                  <span>{{ $t("inspection.standard") }}：</span>
                  {{ currentStepInfo.standard }}
                </view>
                <!-- 巡检标准文件 -->
                <view class="step-standard file" v-if="currentStepInfo.urls">
                  <view class="file-title">
                    {{ $t("inspection.standardFile") }}
                  </view>
                  <view class="file-media">
                    <video
                      class="video"
                      id="myVideo"
                      :src="currentStepInfo.urls"
                      controls
                      v-if="
                        currentStepInfo.urls &&
                        currentStepInfo.urls.includes('mp4')
                      "
                    ></video>
                    <uni-file-picker
                      class="pic"
                      file-mediatype="image"
                      mode="grid"
                      :auto-upload="false"
                      :limit="1"
                      :imageStyles="{ border: false }"
                      v-model="currentStepInfo.urlsList"
                      readonly
                      v-if="
                        currentStepInfo.urls &&
                        (currentStepInfo.urls.includes('jpg') ||
                          currentStepInfo.urls.includes('png'))
                      "
                    >
                      <template #default>
                        <view
                          class="flex-col align-center justify-center"
                          style="
                            width: 60px;
                            height: 60px;
                            background-color: #f4f4f4;
                          "
                        >
                          <uni-icons
                            type="plusempty"
                            color="#ACACAC"
                            size="12"
                          />
                        </view>
                      </template>
                    </uni-file-picker>
                  </view>
                </view>
                <view class="step-form-item">
                  <!-- 是否异常 -->
                  <view class="form-title">
                    {{ $t("inspection.isAbnormal") }}
                  </view>
                  <view class="form-btns flex-row justify-center">
                    <button
                      type="default"
                      class="abnormal-btn"
                      :class="{ active: currentStepInfo.ifNormal == true }"
                      @click="() => (currentStepInfo.ifNormal = true)"
                    >
                      {{ $t("inspection.normal") }}
                      <uni-icons
                        type="checkmarkempty"
                        color="#004098"
                        v-if="currentStepInfo.ifNormal == true"
                      ></uni-icons>
                    </button>
                    <button
                      type="default"
                      class="abnormal-btn"
                      :class="{ active: currentStepInfo.ifNormal == false }"
                      @click="() => (currentStepInfo.ifNormal = false)"
                    >
                      {{ $t("inspection.abnormal") }}
                      <uni-icons
                        type="checkmarkempty"
                        color="#004098"
                        v-if="currentStepInfo.ifNormal == false"
                      ></uni-icons>
                    </button>
                  </view>
                  <!-- 异常描述 -->
                  <view
                    class="form-remark flex-row justify-between align-center"
                  >
                    <view class="form-title align-center">
                      <span
                        v-if="currentStepInfo.ifNormal == false"
                        style="color: #ff3b36"
                        >*</span
                      >
                      {{ $t("inspection.abnormalDesc") }}
                    </view>
                    <uni-easyinput
                      style="text-align: right"
                      type="textarea"
                      :autoHeight="true"
                      :inputBorder="false"
                      :clearable="false"
                      :styles="{ disableColor: '#fff' }"
                      v-model="currentStepInfo.description"
                      :placeholder="$t('operation.PleaseFillIn')"
                    />
                  </view>
                  <!-- 图片 -->
                  <view class="flex-row">
                    <view class="form-title">
                      {{ $t("general.picture") }}
                    </view>
                    <uni-file-picker
                      file-mediatype="image"
                      mode="grid"
                      :auto-upload="false"
                      :limit="1"
                      :imageStyles="{ border: false }"
                      v-model="currentStepInfo.picUrlList"
                      @select="upload($event)"
                    >
                      <template #default>
                        <view
                          class="flex-col align-center justify-center"
                          style="
                            width: 60px;
                            height: 60px;
                            background-color: #f4f4f4;
                          "
                        >
                          <uni-icons
                            type="plusempty"
                            color="#ACACAC"
                            size="12"
                          />
                        </view>
                      </template>
                    </uni-file-picker>
                  </view>
                </view>
              </view>
              <view class="step-btns flex-row justify-end align-center">
                <button
                  type="primary"
                  :plain="true"
                  @click="onFault"
                  v-if="currentStepInfo.ifNormal == false"
                >
                  {{ $t("home.faultReporting") }}
                </button>
                <!-- 上一步 -->
                <button
                  type="primary"
                  :plain="true"
                  v-if="currentStepInfo.indexId > 1"
                  @click="onLast"
                >
                  {{ $t("inspection.last") }}
                </button>
                <!-- 下一步 -->
                <button
                  type="primary"
                  :plain="false"
                  v-if="currentStepInfo.indexId != detail.allStepsList.length"
                  @click="onNext()"
                >
                  {{ $t("inspection.next") }}
                </button>
                <button
                  type="primary"
                  :plain="false"
                  v-if="currentStepInfo.indexId == detail.allStepsList.length"
                  @click="onNext('finished')"
                >
                  {{ $t("inspection.finish") }}
                </button>
              </view>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </template>
  </view>
  <!-- 所有步骤弹窗 -->
  <uni-popup
    ref="allStepPopRef"
    background-color="#fff"
    type="top"
    borderRadius="0 0 10px 10px"
  >
    <view class="popup-content flex-col">
      <view class="step-route-desc" v-if="details[currentTab].routeDesc">
        <view class="popup-step-title">
          <uni-section
            class="desc-section"
            :title="details[currentTab].routeName"
            type="line"
          ></uni-section>
        </view>
        <view class="route-desc-content">
          {{ details[currentTab].routeDesc }}
        </view>
        <view class="step-border"></view>
      </view>
      <view
        class="step-all-content"
        :class="{ 'has-route': details[currentTab].routeDesc }"
      >
        <view class="popup-step-title">
          <uni-section title="巡检项" type="line"></uni-section>
        </view>
        <uni-steps
          :options="details[currentTab].allStepsList"
          active-color="#004098"
          active-icon="smallcircle-filled"
          :active="details[currentTab].currentStep"
          direction="column"
        />
      </view>
    </view>
  </uni-popup>
</template>
<script setup>
import {
  ref,
  reactive,
  onMounted,
  computed,
  getCurrentInstance,
  nextTick,
} from "vue";
import { onLoad, onReady } from "@dcloudio/uni-app";
import {
  getInspectOrderGet,
  getInspectOrderGetDetails,
  inspectOrderWrite,
} from "@/api/inspection.js";

import { useDataDictStore } from "@/store/modules/dataDict";
import { reloginByUserId } from "@/utils/auth";
import { uploadFile } from "@/api";
// 引用全局变量$t
const { appContext } = getCurrentInstance();
const t = appContext.config.globalProperties.$t;
// 巡检工单id
const workOrderId = ref("");
// 巡检工单tab列表
const tabs = ref([]);
// 巡检工单详情
const details = ref([]);
// 巡检工单详情原始数据
const originalDetails = ref([]);
// 获取巡检工单详情
const getData = async () => {
  await getInspectOrderGetDetails({
    id: workOrderId.value,
  }).then((res) => {
    console.log("getInspectOrderGetDetails", res);
    // 遍历res.data数组中orderDetails数组
    res.data.map((item) => {
      console.log("🚀 ~ getData ~ item:", item);
      // 存放所有路径

      // 存放所有步骤
      item.allStepsList = [];
      // 默认当前步骤为0
      item.currentStep = 0;
      const ifNormalArr = [];
      item.orderDetails.map((detail) => {
        // 将picUrl和urls字段组成数组
        detail.picUrlList = [];
        detail.urlsList = [];
        if (detail.picUrl) {
          detail.picUrlList.push({
            url: detail.picUrl,
          });
        }
        if (detail.urls) {
          detail.urlsList.push({
            url: detail.urls,
          });
        }
        // 存放所有步骤
        item.allStepsList.push({
          title: detail.item,
          indexId: detail.indexId,
        });
        // 存放是否异常
        ifNormalArr.push(detail.ifNormal);
      });
      // 判断所有步骤是否异常是否全部选择
      if (ifNormalArr.every((item) => item != null)) {
        // 全部选择 - 将当前步骤设置为最后一步
        item.currentStep = ifNormalArr.length - 1;
      } else {
        // 未全部选择 - 将当前步骤设置为未选择异常的步骤
        item.currentStep = ifNormalArr.findIndex((item) => item == null);
      }
    });
    details.value = res.data;
    console.log("details.value", details.value);
    // 备份原始数据
    originalDetails.value = JSON.parse(JSON.stringify(res.data));
    // 根据原始数据生成tabs选项卡数据，避免填报时数据变化影响tab状态
    const tabsData = originalDetails.value.map((item) => {
      // 判断Tab是否已完成
      const isCompleted = isTabCompleted(item);
      return {
        name: item.deviceName, // 必备字段，展示的tab名称
        textStyle: isCompleted ? "" : { color: "#e96900" }, //手动修改组件添加的字段，用于控制文字颜色
      };
    });
    tabs.value = tabsData;
    console.log("🚀 ~ getData ~ tabs.value:", tabs.value);
  });
};
// 当前巡检步骤信息
const currentStepInfo = computed(
  () =>
    details.value[currentTab.value].orderDetails[
      details.value[currentTab.value].currentStep
    ]
);
// --------- 巡检工单tab ---------
// 当前巡检tab
const currentTab = ref(0);
// 巡检工单tab滚动容器
const scrollContainerRef = ref(null);
// 巡检工单tab segmented-control
const segmentedControlRef = ref(null);
// 巡检工单tab滚动容器 scroll位置
const tabScrollLeft = ref(0);

const tabsRef = ref(null);
// 判断Tab是否已完成的方法
const isTabCompleted = (item) => {
  // 根据实际业务逻辑判断，这里假设当前Tab索引小于当前步骤则视为已完成
  const { allStepsList, currentStep, orderDetails } = item;
  if (currentStep < allStepsList.length - 1) return false; // 如果当前步骤小于总步骤数，则说明未完成
  // 如果当前步骤等于总步骤数，且最后一步的ifNormal字段不为null，则说明已完成
  const lastStep = orderDetails[orderDetails.length - 1];
  return lastStep.ifNormal !== null;
};
// 点击切换tab
const onClickItem = async (e) => {
  // console.log("🚀 ~ onClickItem ~ e:", e);
  if (currentTab.value !== e.index) {
    currentTab.value = e.index;
  }
};

// Swiper滑动切换Tab时，同步滚动Tab到中心
const onSwiperChanged = async (e) => {
  // console.log("🚀 ~ onSwiperChanged ~ e:", e);
  const newTabIndex = e.detail.current;
  currentTab.value = newTabIndex;

};
// -------------------所有步骤弹窗-------------------
const allStepPopRef = ref(null);
const allStepShow = () => {
  allStepPopRef.value.open();
};
// 故障上报
const onFault = () => {
  uni.navigateTo({
    url: "/pages/fault/create",
    success() {
      const data = {
        id: currentStepInfo.value.deviceId,
        deptId: currentStepInfo.value.deptId,
        deviceCode: details.value[currentTab.value].deviceCode,
        deviceName: details.value[currentTab.value].deviceName,
      };
      setTimeout(() => {
        uni.$emit("inspection-falut", data);
      }, 300);
    },
  });
};
// 上一步
const onLast = () => {
  details.value[currentTab.value].currentStep -= 1;
  console.log(
    "🚀 ~ onLast ~ details.value[currentTab.value].:",
    details.value[currentTab.value]
  );
};
// 下一步
const onNext = (finished) => {
  // 判断当前步骤是否异常
  if (currentStepInfo.value.ifNormal == null) {
    uni.showToast({
      title: t("operation.PleaseSelect") + t("inspection.isAbnormal"),
      icon: "none",
    });
    return;
  }
  // 判断当前步骤是否填写异常描述
  console.log("🚀 ~ onNext ~ currentStepInfo.value:", currentStepInfo.value);
  if (
    currentStepInfo.value.ifNormal == false &&
    (currentStepInfo.value.description == "" ||
      currentStepInfo.value.description == null)
  ) {
    uni.showToast({
      title: t("operation.PleaseFillIn") + t("inspection.abnormalDesc"),
      icon: "none",
    });
    return;
  }
  inspectOrderWrite(workOrderId.value, {
    description: currentStepInfo.value.description,
    deviceId: currentStepInfo.value.deviceId,
    ifNormal: currentStepInfo.value.ifNormal,
    indexId: currentStepInfo.value.indexId,
    picUrl: currentStepInfo.value.picUrl,
  }).then((res) => {
    if (res.code == 0) {
      if (finished) {
        uni.showToast({ title: t("general.submitSuccess"), icon: "none" });
        navigatorBack();
      } else {
        details.value[currentTab.value].currentStep += 1;
      }
    } else {
      uni.showToast({ title: res.msg, icon: "none" });
    }
  });
};
const getDataInfo = async () => {
  await getInspectOrderGet({
    id: workOrderId.value,
  }).then((res) => {
    // 将res.data.details数组中的deviceCode赋值给details.value数组中的对应deviceId 的 deviceCode
    res.data.details.map((item) => {
      const device = details.value.find(
        (detail) => detail.deviceId == item.deviceId
      );
      if (device) {
        device.deviceCode = item.deviceCode;
      }
    });
    console.log("details.value", details.value);
  });
};
// 上传图片
const upload = async (event) => {
  for (const path of event.tempFilePaths) {
    currentStepInfo.value.picUrl = (await uploadFile(path)).data;
    currentStepInfo.value.picUrlList.push({
      url: currentStepInfo.value.picUrl,
    });
  }
};

const navigatorBack = () => {
  uni.navigateBack();
};
onLoad(async (option) => {
  console.log("🚀 ~ inspection edit ~ onLoad:");

  await reloginByUserId(option.reloginUserId);

  workOrderId.value = option.id;
  await getData();
  await getDataInfo();
  console.log("🚀 onLoad ~ tabs.value:", tabs.value);
});
onReady(async () => {
  console.log("🚀 ~ inspection edit ~ onReady:");
});
onMounted(() => {
  console.log("🚀 ~ inspection edit ~ onMounted:");
});
</script>
<style lang="scss" scoped>
@import "@/style/work-order-detail.scss";
// 补充自定义Tab项样式，确保宽度正常（避免Tab过窄或过宽）
:deep(.uni-segmented-control__item) {
  .tab-item {
    width: max-content;
    padding: 0 16px; // 增加Tab内边距，避免文字拥挤
    height: 36px; // 固定Tab高度，确保对齐
    line-height: 36px; // 垂直居中
  }
}
:deep(.custom-finish-tab) {
  .uv-tabs__wrapper__nav__item__text {
    // color: #79C278 !important;
  }
}
.page {
  padding: 0;
  position: relative;
}

.page-top {
  background: #004098;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 20px;
}

.top-content {
  padding-bottom: 30px;
  box-sizing: border-box;
  width: 100%;
  min-height: 70px;
  font-weight: bold;
  font-size: 16px;
  color: #ffffff;
  line-height: 28px;
}

.page-content {
  width: 100%;
  height: calc(100% - 100px);
  margin-top: -30px;
  background: #fff;
  background: #ffffff;
  border-radius: 20px 20px 0px 0px;
  // z-index: 1;
}

.tabs-container {
  position: relative;
  width: 100%;
  white-space: nowrap;
  padding: 20px;
  box-sizing: border-box;
}

:deep(.segmented-control) {
  overflow: unset;
}

:deep(.segmented-control__item) {
  uni-view {
    width: max-content;
    padding: 10px;
  }
}

.swiper-container {
  position: relative;
  width: 100%;
  height: calc(100% - 110px);
  padding: 0 20px;
  box-sizing: border-box;
}

.step-section {
  // font-weight: 600;
  width: 100%;
  height: 100%;
  font-size: 14px;
  color: #333333;
  position: relative;
}

.step-form {
  height: calc(100% - 50px - 30px - 10px - var(--status-bar-height));
  margin-bottom: 60px;
  overflow-y: auto;
}

.step-all {
  font-weight: 600;
  font-size: 14px;
  color: #004098;
  position: relative;
  padding-left: 10px;
  margin-bottom: 10px;
}

.step-title {
  position: relative;
  font-weight: 600;
  padding-left: 10px;
  margin-bottom: 10px;
}

.border {
  width: 2px;
  height: 14px;
  background-color: #004098;
  position: absolute;
  left: 0;
  top: 3px;
}

.step-standard {
  padding-left: 10px;
  margin-bottom: 10px;

  span {
    font-weight: 600;
  }
}

.file-media {
  margin: 10px 0;

  .pic,
  .video {
    width: 100px !important;
    height: 100px !important;
  }

  :deep(.file-picker__box) {
    width: 100px !important;
    height: 100px !important;
  }
}

.abnormal-btn {
  width: 45%;
  height: 35px;
  line-height: 35px;
  margin-top: 10px;
  font-weight: 600;
  font-size: 14px;
  color: #666666;
  background: #f3f5f9;
  border-radius: 4px;
  position: relative;

  &.active {
    background: #e4effe;
    color: #004098;
  }

  .uni-icons {
    position: absolute;
    right: 20px;
  }
}

.form-title {
  margin-right: 15px;
}

.form-remark {
  height: 50px;
  border-bottom: 1px dashed #cacccf;
  margin-bottom: 20px;
  margin-top: 10px;
}

:deep(.uni-easyinput__content-textarea) {
  min-height: inherit;
  margin: 10px;
}

.step-btns {
  // margin: 10px;
  height: 50px;
  width: 100%;
  background: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding-bottom: var(--status-bar-height);

  uni-button {
    width: calc(33.3% - 20px);
    font-size: 14px;
    height: 32px;
    line-height: 32px;
  }
}

.popup-content {
  width: 100%;
  min-height: 300px;
  max-height: 500px;
  overflow-y: auto;
  position: relative;
  box-sizing: border-box;
  padding: 20px;
  margin-top: var(--status-bar-height);
}
.step-route-desc {
  position: fixed;
  top: 0px;
  left: 0px;
  padding: 10px 20px;
  padding-bottom: 0;
  background: #f2f4f8;
  color: #004098;
  font-size: 14px;
  z-index: 2;
  box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.1);
  // max-height: 130px;
  overflow: hidden;
}
.route-desc-content {
  width: 100%;
  max-height: 100px;
  overflow-y: auto;
}
.step-border {
  border-bottom: 1px dashed #cacccf;
  padding-top: 10px;
  width: 100%;
}
.step-all-content {
  &.has-route {
    margin-top: 150px;
  }
}
.popup-step-title {
  :deep(.uni-section) {
    padding: 10px 0;
  }
  :deep(.uni-section__content-title) {
    font-weight: 600;
  }
  .desc-section {
    background: #f2f4f8;
  }
}

:deep(.uni-steps__column-text) {
  height: 38px;
  font-weight: 600;
  font-size: 14px;
  color: #666666;
  line-height: 30px;
  display: flex;
  // justify-content: center;
  border: none;
}

:deep(.uni-steps__column-title) {
  color: #666666;
}

:deep(.uni-steps__column-line-item) {
  color: #666666;
  height: 50px !important;
}

:deep(.uni-steps__column-circle) {
  color: #666666;
  height: 10px;
  width: 10px;
}
</style>