pms-app/components/repair/add.vue

<template>
  <uni-popup
    class="repairs-popup"
    ref="repairAddPopRef"
    type="bottom"
    :is-mask-click="false"
    borderRadius="10px 10px 0 0 "
    background-color="#fff"
  >
    <uni-row class="head-row align-center">
      <uni-col
        :span="6"
        class="head-cancel align-center justify-start"
        @click="oncancel"
      >
        {{ $t("operation.cancel") }}
      </uni-col>
      <uni-col :span="12" class="head-title justify-center">
        {{ $t("operation.add")
        }}{{ $t("equipmentMaintenance.maintenanceItems") }}
      </uni-col>
      <uni-col
        :span="6"
        class="head-add align-center justify-end"
        @click="onConfirm(repairAddFormRef)"
      >
        {{ $t("operation.confirm") }}
      </uni-col>
    </uni-row>
    <view class="repair-add-section">
      <uni-forms
        ref="repairAddFormRef"
        labelWidth="140px"
        :modelValue="addInfo"
        :rules="formRules"
      >
        <!-- 设备编码 -->
        <uni-forms-item
          class="form-item"
          :label="$t('device.deviceCode')"
          name="deviceCode"
          :required="true"
        >
          <uni-easyinput
            style="text-align: right"
            :inputBorder="false"
            :clearable="false"
            :disabled="true"
            :styles="{ disableColor: '#fff' }"
            v-model="addInfo.deviceCode"
            :placeholder="$t('operation.PleaseFillIn')"
          />
        </uni-forms-item>
        <!-- 设备名称 -->
        <uni-forms-item
          class="form-item"
          :label="$t('device.deviceName')"
          name="deviceName"
          :required="true"
        >
          <uni-easyinput
            style="text-align: right"
            :inputBorder="false"
            :clearable="false"
            :disabled="true"
            :styles="{ disableColor: '#fff' }"
            v-model="addInfo.deviceName"
            :placeholder="$t('operation.PleaseFillIn')"
          />
        </uni-forms-item>
        <!-- 维修项 -->
        <uni-forms-item
          class="form-item"
          :label="$t('equipmentMaintenance.maintenanceItems')"
          name="name"
          :required="false"
        >
          <uni-easyinput
            style="text-align: right"
            :inputBorder="false"
            :clearable="false"
            :disabled="false"
            :styles="{ disableColor: '#fff' }"
            v-model="addInfo.name"
            :placeholder="$t('operation.PleaseFillIn')"
          />
        </uni-forms-item>
      </uni-forms>
    </view>
  </uni-popup>
</template>

<script setup>
import dayjs from "dayjs";
import { computed, ref, reactive, watch, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import { getDeptId } from "@/utils/auth";

const { t, locale } = useI18n({
  useScope: "global",
});

// 接收父组件传递的参数
const props = defineProps({});

const allBoms = ref([]);
const addInfo = ref({});
const repairAddFormRef = ref(null);
const formRules = ref({
  name: {
    rules: [
      {
        required: true,
        errorMessage: t("operation.PleaseFillIn"),
      },
    ],
  },
});
const oncancel = () => {
  addInfo.value = {};
  close();
};
const onConfirm = async (formEl) => {
  if (!formEl) return;
  await formEl
    .validate()
    .then((res) => {
      console.log("onConfirm res-", res);

      addInfo.value.chooseKey = `${addInfo.value.deviceCode}_${addInfo.value.deviceName}_${addInfo.value.name}`; // 手动拼接chooseKey
      // 生成8位随机数字作为bomNodeId
      addInfo.value.bomNodeId = Math.floor(Math.random() * 100000000); //.toString();

      // 判断addInfo.value.chooseKey是否在allBoms.value中
      if (allBoms.value.includes(addInfo.value.chooseKey)) {
        uni.showToast({
          title:
            t("equipmentMaintenance.maintenanceItems") + t("operation.repeat"),
          icon: "none",
        });
      } else {
        emit("add-set", addInfo.value);
        oncancel();
      }
    })
    .catch((err) => {
      console.error("onConfirm err-", err);
    });
};

onMounted(() => {});

const repairAddPopRef = ref(null);

// 打开弹窗
const open = (info) => {
  const { bom, ...device } = info;
  console.log("repair-open", info, bom);
  addInfo.value = device;
  // 遍历bom,返回deviceCode,deviceName,name拼接成的字符串形成新数组赋值allBoms
  allBoms.value = bom.map(
    (item) => `${item.deviceCode}_${item.deviceName}_${item.name}`
  );
  console.log("allBoms.value-", allBoms.value);
  repairAddPopRef.value.open();
};

// 关闭弹窗
const close = () => {
  repairAddPopRef.value.close();
};

const emit = defineEmits(["add-set"]);
// 提供外部方法
const expose = {
  open,
};
defineExpose(expose);
</script>

<style lang="scss" scoped>
@import "@/style/work-order-detail.scss";

.repairs-popup {
  width: 100%;
  height: 100%;
  min-height: 411px;
  background-color: #fff;
  padding: 20px;
}

:deep(.uni-popup__wrapper) {
  padding: 20px;
}

.head-row {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 21px;
  color: #a3a3a3;
  height: 40px;
  border-bottom: 1px dashed #cacccf;
}

.head-title {
  color: #333333;
  font-weight: bold;
}

.head-add {
  color: #004098;
}
</style>