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

<template>
  <scroll-view scroll-y="true" class="work-order-materials">
    <view class="device-section" v-for="(material, index) in materialsData">
      <!-- 保养项 -->
      <view class="item-module">
        <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>{{ material.bomName }}</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("workOrder.materialName") }}:</span
          >
        </view>
        <view class="item-title">
          <!-- 新增物料时，需要填写 -->
          <uni-easyinput
            v-if="material.isNew"
            type="text"
            style="text-align: right"
            :styles="{ disableColor: 'transparent' }"
            :inputBorder="false"
            :clearable="true"
            :disabled="materialDisabled  || material.isNotConsumeMaterial || material.isStatusClosed"
            :placeholder="placeholderRequired"
            v-model="material.materialName"
          />
          <span v-else>{{ material.materialName }}</span>
        </view>
      </view>
      <!-- 物料编码 -->
      <view class="item-content flex-row align-center justify-between">
        <view class="item-title">
          <span class="item-title-width"
            >{{ $t("workOrder.materialCode") }}:</span
          >
        </view>
        <view class="item-title">
          <!-- 新增物料时，需要填写 -->
          <uni-easyinput
            v-if="material.isNew"
            type="text"
            style="text-align: right"
            :styles="{ disableColor: 'transparent' }"
            :inputBorder="false"
            :clearable="true"
            :disabled="
              materialDisabled ||
              material.isNotConsumeMaterial ||
              material.isStatusClosed
            "
            :placeholder="placeholderFill"
            v-model="material.materialCode"
          />
          <span v-else>{{ material.materialCode }}</span>
        </view>
      </view>
      <!-- 单位 -->
      <view class="item-content flex-row align-center justify-between">
        <view class="item-title">
          <span class="item-title-width"> {{ $t("workOrder.unit") }}: </span>
        </view>
        <view class="item-title">
          <!-- 新增物料时，需要填写 -->
          <uni-easyinput
            v-if="material.isNew"
            type="text"
            style="text-align: right"
            :styles="{ disableColor: 'transparent' }"
            :inputBorder="false"
            :clearable="true"
            :disabled="
              materialDisabled ||
              material.isNotConsumeMaterial ||
              material.isStatusClosed
            "
            :placeholder="placeholderFill"
            v-model="material.unit"
          />
          <span v-else>{{ material.unit }}</span>
        </view>
      </view>
      <!-- 单价 -->
      <view class="item-content flex-row align-center justify-between">
        <view class="item-title">
          <span class="item-title-width">
            {{ $t("workOrder.unitPriceCNY") }}:
          </span>
        </view>
        <view class="item-title">
          <uni-easyinput
            type="digit"
            style="text-align: right"
            :styles="{ disableColor: 'transparent' }"
            :inputBorder="false"
            :clearable="true"
            :disabled="
              materialDisabled ||
              material.isNotConsumeMaterial ||
              material.isStatusClosed
            "
            :placeholder="placeholderRequired"
            @change="onMaterialChange"
            v-model="material.unitPrice"
          />
        </view>
      </view>

      <!-- 消耗数量 -->
      <view class="item-content flex-row align-center justify-between">
        <view class="item-title">
          <span class="item-title-width">
            {{ $t("workOrder.consumptionQuantity") }}:
          </span>
        </view>
        <uni-easyinput
          type="digit"
          style="text-align: right"
          :styles="{ disableColor: 'transparent' }"
          :inputBorder="false"
          :clearable="true"
          :disabled="
            materialDisabled ||
            material.isNotConsumeMaterial ||
            material.isStatusClosed
          "
          :placeholder="placeholderRequired"
          @change="onMaterialChange"
          v-model="material.quantity"
        />
      </view>
      <!-- 库存数量 -->
      <view
        class="item-content flex-row align-center justify-between"
        v-if="!material.isNew"
      >
        <view class="item-title">
          <span class="item-title-width">
            {{ $t("workOrder.inventoryQuantity") }}:
          </span>
        </view>
        <view class="item-title">
          <span>{{ material.stockQuantity }}</span>
        </view>
      </view>
      <!-- 来源 -->
      <view class="item-content flex-row align-center justify-between">
        <view class="item-title">
          <span class="item-title-width"> {{ $t("workOrder.source") }}: </span>
        </view>
        <view class="item-title">
          <span>{{ material.materialSource }}</span>
        </view>
      </view>
      <!-- 操作按钮 -->
      <view class="item-opera flex-row justify-end">
        <!-- 删除按钮 -->
        <button
          type="primary"
          :plain="true"
          @click="ondelete(material, index)"
          v-if="
            !materialDisabled &&
            !material.isNotConsumeMaterial &&
            !material.isStatusClosed
          "
        >
          {{ $t("operation.delete") }}
        </button>
      </view>
    </view>
  </scroll-view>
  <!-- 提示信息弹窗 -->
  <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.isDeleteMaterial')}?`"
      @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, watch } from "vue";
import dayjs from "dayjs";
// --------------------------引用组件--------------------------------------
// --------------------------引用全局变量$t---------------------------------
const { appContext } = getCurrentInstance();
const t = appContext.config.globalProperties.$t;
// --------------------------接收参数---------------------------------------
const props = defineProps({
  // 保养项列表
  materialsData: {
    type: Array,
    default: () => [],
  },
  materialDisabled: {
    type: Boolean,
    default: false,
  },
});
console.log("🚀 ~ props.materialsData:", props.materialsData);
//  根据materialDisabled动态返回表单placeholder - 填写或禁用
const placeholderFill = computed(() => {
  return props.materialDisabled ? "" : t("operation.PleaseFillIn");
});
const placeholderRequired = computed(() => {
  return props.materialDisabled
    ? ""
    : t("operation.PleaseFillIn") + t("workOrder.materialRequired");
});

// 监听物料数量变化
watch(
  () => props.materialsData,
  (newVal) => {
    console.log("🚀 ~  props.materialsData:materialChanged", newVal);
    emit("materialChanged");
  },
  { deep: true }
);

// 提示信息弹窗
const alertDialogRef = ref(null);
// 待删除的物料
const materialToDelete = ref({});
// 删除物料
const ondelete = (material, index) => {
  // 记录待删除的物料
  materialToDelete.value.material = material;
  materialToDelete.value.index = index;
  // 显示删除提示弹窗
  alertDialogRef.value.open();
};
// 删除弹窗确认事件
const dialogConfirm = () => {
  console.log("🚀 删除弹窗确认事件:");
  emit("deleteMaterial", materialToDelete.value);
  // 关闭弹窗
  dialogClose();
};
// 删除弹窗关闭事件
const dialogClose = () => {
  console.log("🚀 删除弹窗关闭事件:");
  // 关闭弹窗
  alertDialogRef.value.close();
};

const onMaterialChange = () => {
  emit("materialChange");
};

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

<style lang="scss" scoped>
@import "@/style/work-order-detail.scss";
.work-order-materials {
  height: 100%;
}
</style>