|
|
@@ -1,838 +1,684 @@
|
|
|
-<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>
|
|
|
+<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>
|
