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

<template>
  <scroll-view scroll-y="true" class="work-order-boms">
    <view
      class="device-section"
      :class="{
        active: bom.workOrderBomOnlyKey === currentBom.workOrderBomOnlyKey,
      }"
      v-for="bom in bomsData"
      :key="bom.workOrderBomOnlyKey"
    >
      <!-- 已维修标识 -->
      <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("equipmentMaintenance.maintenanceItems") }}:</span
            >
          </view>
          <view class="item-title">
            <span>{{ bom.name }}</span>
          </view>
        </view>
      </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>

        <switch
          :checked="bom.rule == 0 ? true : false"
          @change="bomRuleChange(bom)"
        />
      </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("equipmentMaintenance.noConsumeMaterialReason") }}:
          </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>

      <!-- 操作按钮 -->
      <view class="item-opera flex-row justify-end">
        <!-- 删除 -->
        <button type="primary" :plain="true" @click="ondeleteBom(bom)">
          {{ $t("operation.delete") }}
        </button>
      </view>
    </view>
  </scroll-view>

  <!-- 提示信息弹窗 -->
  <uni-popup ref="messageRef" type="message">
    <uni-popup-message
      :type="msgType"
      :message="messageText"
      :duration="2000"
    ></uni-popup-message>
  </uni-popup>
  <!-- 提示弹窗 -->
  <uni-popup ref="alertDialogRef" type="dialog">
    <!-- 删除提示 -->
    <uni-popup-dialog
      :type="'warn'"
      :title="$t('api.message')"
      :cancelText="$t('operation.cancel')"
      :confirmText="$t('operation.confirm')"
      :content="`${$t('workOrder.isDeleteBom')}?`"
      @confirm="dialogConfirm"
      @close="dialogClose"
    ></uni-popup-dialog>
  </uni-popup>
</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 msgType = ref("success");
const messageText = ref(""); // 提示信息
const messageRef = ref(null);

// -------------------------- 切换选中维修项 ---------------------------------------
const onSelect = (bom) => {
  console.log("onSelect", bom);
  emit("onSelectBom", bom);
};
// -------------------------- 切换是否消耗物料 ---------------------------------------
const bomRuleChange = (bom) => {
  console.log("bomRuleChange", bom);
  // 是否消耗物料  rule   (0需要 1不需要)
  if (bom.rule == "0") {
    bom.rule = "1";
    bom.materials = []; // 无物料维修清空对应物料列表

  } else {
    bom.rule = "0";
    bom.remark = ""; // 无物料维修原因清空
  }
  // 通知父组件更新统计
  emit("updateStatistics");
};
// 提示信息弹窗
const alertDialogRef = ref(null);
// 待删除的物料
const bomToDelete = ref({});
// 删除物料
const ondeleteBom = (bom, index) => {
  // 记录待删除的物料
  bomToDelete.value = bom;
  // 显示删除提示弹窗
  alertDialogRef.value.open();
};
// 删除弹窗确认事件
const dialogConfirm = () => {
  console.log("🚀 删除弹窗确认事件:");
  emit("deleteBom", bomToDelete.value);
  // 关闭弹窗
  dialogClose();
};
// 删除弹窗关闭事件
const dialogClose = () => {
  console.log("🚀 删除弹窗关闭事件:");
  // 关闭弹窗
  alertDialogRef.value.close();
};

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