pms-app/pages/maintenance/components/work-order-boms.vue

<template>
  <scroll-view scroll-y="true" class="work-order-boms">
    <view
      class="device-section"
      :class="{ active: bom.id === currentBom.id }"
      v-for="bom in bomsData"
      :key="bom.id"
    >
      <!-- 已保养标识 -->
      <view class="device-section-selected" v-if="bom.maintainedFlag">
        <uni-icons type="checkmarkempty" size="13" color="#FFF"></uni-icons>
      </view>
      <view @click="onSelect(bom)">
        <!-- 设备名称 -->
        <view class="item-module">
          <view class="item-content flex-row align-center justify-between">
            <view class="item-title">
              <span class="item-title-width"
                >{{ $t("device.deviceName") }}:</span
              >
            </view>
            <view class="item-title">
              <span>{{ bom.deviceName }}</span>
            </view>
          </view>
          <view class="module-border"> </view>
        </view>
        <!-- 设备编码 -->
        <view class="item-content flex-row align-center justify-between">
          <view class="item-title">
            <span class="item-title-width">{{ $t("device.deviceCode") }}:</span>
          </view>
          <view class="item-title">
            <span>{{ bom.deviceCode }}</span>
          </view>
        </view>
        <!-- 保养项 -->
        <view class="item-content flex-row align-center justify-between">
          <view class="item-title">
            <span class="item-title-width"
              >{{ $t("maintenanceWorkOrder.maintenanceItems") }}:</span
            >
          </view>
          <view class="item-title">
            <span>{{ bom.name }}</span>
          </view>
        </view>
      </view>
      <!-- 累计运行时间 bom.totalRunTime > 0 时展示 -->
      <view
        class="item-content flex-row align-center justify-between"
        v-if="bom.totalRunTime > 0"
      >
        <view class="item-title">
          <span class="item-title-width">
            {{ $t("maintenanceWorkOrder.accumulatedRunningTime") }}(h):
          </span>
        </view>
        <view class="item-title">
          <span>{{ bom.totalRunTime }}</span>
        </view>
      </view>
      <!-- 累计运行里程 bom.totalMileage > 0 时展示 -->
      <view
        class="item-content flex-row align-center justify-between"
        v-if="bom.totalMileage > 0"
      >
        <view class="item-title">
          <span class="item-title-width">
            {{ $t("maintenanceWorkOrder.accumulatedRunningMileage") }}(km):
          </span>
        </view>
        <view class="item-title">
          <span>{{ bom.totalMileage }}</span>
        </view>
      </view>
      <!-- 运行时间周期  runningTimeRule=0时需要展示-->
      <view
        class="item-content flex-row align-center justify-between"
        v-if="bom.runningTimeRule == 0"
      >
        <view class="item-title">
          <span class="item-title-width">
            {{ $t("maintenanceWorkOrder.runningTimeCycle") }}:
          </span>
        </view>
        <uni-easyinput
          style="text-align: right"
          :inputBorder="false"
          :clearable="true"
          type="digit"
          :styles="{ disableColor: '#fff' }"
          v-model="bom.nextRunningTime"
          :placeholder="$t('operation.PleaseFillIn')"
        />
      </view>
      <!-- 是否消耗物料 -->
      <view class="item-content flex-row align-center justify-between">
        <view class="item-title">
          <span class="item-title-width">
            {{ $t("workOrder.isConsumptionMaterial") }}:
          </span>
        </view>
        <view class="switch-container">
          <switch
            class="switch"
            :checked="bom.rule == 0 ? true : false"
            :disabled="true"
          />
          <view class="switch-cover" @click="bomRuleChange(bom)"></view>
        </view>
      </view>
      <!-- 无物料保养原因 -->
      <view
        class="item-content flex-row align-center justify-between"
        v-if="bom.rule == 1"
      >
        <view class="item-title">
          <span class="item-title-width">
            {{ $t("maintenanceWorkOrder.noMaterialMaintenanceReason") }}:
          </span>
        </view>
        <uni-easyinput
          style="text-align: right"
          :styles="{ disableColor: '#fff' }"
          :inputBorder="false"
          :autoHeight="true"
          type="textarea"
          :placeholder="$t('operation.PleaseFillIn')"
          v-model="bom.remark"
        />
      </view>
      <!-- 物料数量  -->
      <view class="item-content flex-row align-center justify-between">
        <view class="item-title">
          <span class="item-title-width"
            >{{ $t("workOrder.materialCount") }}:</span
          >
        </view>
        <view class="item-title">
          <span>{{ bom.materialCount }}</span>
        </view>
      </view>
      <!-- 保养状态 （status  0保养中  1保养完成）-->
      <view class="item-content flex-row align-center justify-between">
        <view class="item-title">
          <span class="item-title-width">
            {{ $t("maintenanceWorkOrder.status") }}:
          </span>
        </view>
        <view class="item-title flex-row align-center">
          <view v-if="bom.status == 0">
            {{
              bom.isDelay
                ? $t("maintenanceWorkOrder.delayed")
                : $t("maintenanceWorkOrder.maintenanceInProgress")
            }}
          </view>
          <view v-if="bom.status == 1">
            {{ $t("maintenanceWorkOrder.completed") }}
          </view>
          <view class="switch-container">
            <switch
              class="switch"
              :checked="bom.status == 1 ? true : false"
              :disabled="true"
            />
            <view class="switch-cover" @click="bomStatusChange(bom)"></view>
          </view>
        </view>
      </view>
      <!-- 操作按钮 -->
      <view class="item-opera flex-row justify-end">
        <!-- 延保 只有计划生成时展示 -->
        <button
          type="primary"
          :plain="true"
          @click="ondelay(bom)"
          v-if="workOrderType == 1"
        >
          {{ $t("maintenanceWorkOrder.extendMaintenance") }}
        </button>
      </view>
    </view>
  </scroll-view>
  <!-- 延保 -->
  <maintenance-delay
    ref="maintenanceDelayRef"
    :maintenance="delayItem"
    @delay-set="onDelaySet"
  ></maintenance-delay>
  <!-- 全局提示信息弹窗 -->
  <global-message-popup
    class="boms-message-popup"
    ref="bomsMessageGlobalRef"
    :msgType="msgType"
    :messageText="messageText"
  />
</template>

<script setup>
import { onLoad, onReady, onBackPress } from "@dcloudio/uni-app";
import { ref, reactive, computed, getCurrentInstance } from "vue";
import dayjs from "dayjs";
// --------------------------引用组件--------------------------------------
import maintenanceDelay from "@/components/maintenance/delay.vue";
// --------------------------引用全局变量$t---------------------------------
const { appContext } = getCurrentInstance();
const t = appContext.config.globalProperties.$t;
// --------------------------接收参数---------------------------------------
const props = defineProps({
  // 保养项列表
  bomsData: {
    type: Array,
    default: () => [],
  },
  // 工单类型(1计划生成 2临时新建),
  workOrderType: {
    type: Number,
    default: 2,
  },
  // 当前选中的保养项
  currentBom: {
    type: Object,
    default: () => {},
  },
});
console.log("🚀 ~ props.bomsData:", props.bomsData);
// ----------------------------提示信息弹窗---全局组件-------------------------------
const bomsMessageGlobalRef = ref(null);
// 提示信息弹窗类型
const msgType = ref("success");
// 提示信息弹窗内容
const messageText = ref("");
// 提示信息弹窗方法
const showMessage = (type, message) => {
  msgType.value = type;
  messageText.value = message;
  bomsMessageGlobalRef.value.openMessage();
};

// -------------------------- 切换选中保养项 ---------------------------------------
const onSelect = (bom) => {
  console.log("onSelect", bom);
  emit("onSelectBom", bom);
};
// -------------------------- 切换是否消耗物料 ---------------------------------------
const bomRuleChange = (bom) => {
  console.log("bomRuleChange", bom);
  // 先校验保养项的保养状态是否为已完成（status  0保养中  1保养完成）
  if (bom.status == 1) {
    showMessage(
      "warn",
      bom.deviceCode +
        bom.name +
        " " +
        t("maintenanceWorkOrder.maintenanceStatusCompleted")
    );
    return;
  }
  // 是否消耗物料  rule   (0需要 1不需要)
  if (bom.rule == "0") {
    bom.rule = "1";
    bom.deviceBomMaterials = []; // 清空对应物料列表
  } else {
    bom.rule = "0";
    bom.remark = ""; // 无物料保养原因清空
  }
  // 通知父组件更新统计
  emit("updateStatistics");
};
// -------------------------- 延保 -------------------------------------------
const maintenanceDelayRef = ref(null);
const delayItem = ref({});
// 延保弹窗开启
const ondelay = (item) => {
  console.log("ondelay", item);
  delayItem.value = item;
  maintenanceDelayRef.value.open(item);
};

// 设置延保
const onDelaySet = (item) => {
  console.log("onDelaySet", item);
  // 查找对应的bom，并更新
  props.bomsData.forEach((bom) => {
    if (bom.workOrderBomOnlyKey === item.workOrderBomOnlyKey) {
      bom = {
        ...bom,
        ...item,
      };
    }
  });
  // 通知父组件更新统计
  emit("updateStatistics");
};

// 切换保养状态
const bomStatusChange = (bom) => {
  console.log("bomStatusChange", bom);
  // 保养状态 （status  0保养中  1保养完成）
  if (bom.status == 0) {
    /**
     * 切换为保养完成状态时
     * 1. rule = 1 (不需要消耗物料),
     * 2. rule = 0 (需要消耗物料)时，校验是否设置了物料且物料信息完整(物料名称、消耗数量、单价)
     */
    // 校验是否开启物料消耗
    if (bom.rule == 0) {
      // 校验是否设置了物料
      if (bom.deviceBomMaterials.length == 0) {
        showMessage("error", t("maintenanceWorkOrder.materialEmpty"));
        return;
      }
      // 校验是否存在无效价格和数量的物料
      if (bom.deviceBomMaterials.length > 0) {
        let isMaterial = [];
        bom.deviceBomMaterials.map((material, index) => {
          let invalidMaterialStrArr = [];
          // 提示: 序号(index) 物料名称未填写
          if (!material.materialName) {
            const serialNumberStr = `${t("workOrder.serialNumber")}(${
              index + 1
            })`;
            const materialNameStr = `${t("workOrder.materialName")}${t(
              "status.unfilled"
            )}`;
            invalidMaterialStrArr.push(
              `${serialNumberStr}：${materialNameStr}`
            );
          }
          // 提示: 无效消耗数量: 0
          if (!material.quantity || material.quantity <= 0) {
            invalidMaterialStrArr.push(
              `${t("workOrder.invalid")}${t("workOrder.consumptionQuantity")}:${
                material.quantity || 0
              }`
            );
          }
          // 提示: 无效单价: 0
          if (!material.unitPrice || material.unitPrice <= 0) {
            invalidMaterialStrArr.push(
              `${t("workOrder.invalid")}${t("workOrder.unitPrice")}:${
                material.unitPrice || 0
              }`
            );
          }
          // 最终拼接提示信息并返回
          if (invalidMaterialStrArr.length > 0) {
            let invalidMaterialStr = material.materialName
              ? material.materialName + "：" + invalidMaterialStrArr.join(";")
              : invalidMaterialStrArr.join(";");
            console.log(
              "🚀 ~ bomStatusChange ~ invalidMaterialStrArr:",
              invalidMaterialStrArr
            );
            isMaterial.push(invalidMaterialStr);
          }
        });

        console.log("🚀 ~ bomStatusChange ~ isMaterial:", isMaterial);
        if (isMaterial.length > 0) {
          // 存在无效价格或数量的物料，提示用户
          isMaterial.unshift(t("maintenanceWorkOrder.invalidMaterial"));
          showMessage("error", isMaterial.join("\n"));
          return;
        }
      }
    }
    // 切换为保养完成状态
    bom.status = 1;
    // 校验成功，提示保养成功
    showMessage(
      "success",
      bom.deviceCode +
        bom.name +
        " " +
        t("maintenanceWorkOrder.maintenanceStatusCompleted")
    );
  } else {
    bom.status = 0;
  }
  // 通知父组件更新统计
  emit("updateStatistics");
};

// -------------------------- 暴露给父组件的外部方法 --------------------------
defineExpose({});
// -------------------------- 事件派发 ---------------------------------------
const emit = defineEmits(["onSelectBom", "updateStatistics"]);
</script>

<style lang="scss" scoped>
@import "@/style/work-order-detail.scss";
.item-content {
  &:last-child {
    border-bottom: 1px dashed #cacccf;
  }
}
.work-order-boms {
  height: 100%;
}
.device-section {
  position: relative;
  &.active {
    border: #004098 1px solid;
  }
}
.device-section-selected {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  // 初始状态为透明
  border-style: solid;
  transition: all 0.3s ease;
  // 创建右上角倒三角
  border-width: 0 23px 23px 0;
  border-color: transparent #004098 transparent transparent; // 三角
  .uni-icons {
    position: absolute;
    top: 0;
    right: -21px;
    font-size: 11px;
    color: #fff;
  }
}
:deep(.uni-switch-input) {
  width: 46px;
  height: 23px;
  border-radius: 16px;
  margin-right: 0;
  &::before {
    width: 46px;
    height: 23px;
    background: #9ca0a5;
  }
  &::after {
    width: 19px;
    height: 19px;
    top: 2px;
    left: 3px;
  }
}
:deep(.uni-switch-input-checked) {
  background: #004098;
  &::after {
    top: 1px;
    left: 3px;
  }
}
:deep(uni-switch[disabled] .uni-switch-input) {
  opacity: 0.9;
}
.switch-container {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 23px;
}
.switch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.switch-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
</style>