pms-app/components/maintenance/delay.vue

<template>
  <uni-popup
    class="delay-popup"
    ref="delayPopRef"
    type="bottom"
    :is-mask-click="false"
    borderRadius="10px 10px 0 0 "
    background-color="#FFF"
  >
    <view class="popup-container">
      <view class="delay-head">
        <uni-row class="pop-title flex-row align-center justify-center">
          <uni-col :span="3" class="align-center justify-end">
            {{ $t("maintenanceWorkOrder.equipment") }}
          </uni-col>
          <uni-col class="title align-center justify-center">
            {{ maintenance.deviceCode }}-{{ maintenance.name }}
          </uni-col>
          <uni-col :span="6" class="align-center justify-start">
            {{ $t("maintenanceWorkOrder.maintenanceItemConfiguration") }}
          </uni-col>
        </uni-row>
        <uni-icons
          type="closeempty"
          color="#666"
          class="pop-close"
          @click="oncancel"
        ></uni-icons>
      </view>
      <scroll-view scroll-y="true" class="delay-sections">
        <uni-forms
          ref="delayFormRef"
          labelWidth="140px"
          :rules="delayRules"
          :modelValue="maintenanceInfo"
        >
          <!-- 基础保养记录 -->
          <uni-section
            :title="$t('maintenanceWorkOrder.basicMaintenanceRecords')"
            type="line"
          >
            <!-- 运行里程  保养规则-里程(0启用 1停用)-->
            <view v-if="maintenanceInfo.mileageRule == 0">
              <!-- 上次保养里程数(KM) -->
              <uni-forms-item
                class="form-item"
                :label="$t('maintenanceWorkOrder.lastMaintenanceMileage')"
                name="lastRunningKilometers"
                :required="false"
              >
                <uni-easyinput
                  style="text-align: right"
                  :inputBorder="false"
                  :clearable="false"
                  :disabled="true"
                  :styles="{ disableColor: '#F3F5F9' }"
                  type="digit"
                  v-model="maintenanceInfo.lastRunningKilometers"
                  placeholder=""
                />
              </uni-forms-item>
              <!-- 推迟公里数((KM) -->
              <uni-forms-item
                class="form-item"
                :label="$t('maintenanceWorkOrder.delayedKilometers')"
                name="delayKilometers"
                :required="false"
              >
                <uni-easyinput
                  style="text-align: right"
                  :inputBorder="false"
                  :clearable="true"
                  :disabled="false"
                  :styles="{ disableColor: '#F3F5F9' }"
                  type="digit"
                  v-model="maintenanceInfo.delayKilometers"
                  placeholder=""
                />
              </uni-forms-item>
            </view>
            <!-- 运行时间 保养规则-运行时间(0启用 1停用)-->
            <view v-if="maintenanceInfo.runningTimeRule == 0">
              <!-- 上次保养运行时间(H) -->
              <uni-forms-item
                class="form-item"
                :label="$t('maintenanceWorkOrder.lastMaintenanceRunningTime')"
                name="lastRunningTime"
                :required="false"
              >
                <uni-easyinput
                  style="text-align: right"
                  :inputBorder="false"
                  :clearable="false"
                  :disabled="true"
                  :styles="{ disableColor: '#F3F5F9' }"
                  type="digit"
                  v-model="maintenanceInfo.lastRunningTime"
                  placeholder=""
                />
              </uni-forms-item>
              <!-- 推迟时长(H) -->
              <uni-forms-item
                class="form-item"
                :label="$t('maintenanceWorkOrder.delayedDuration')"
                name="delayDuration"
                :required="false"
              >
                <uni-easyinput
                  style="text-align: right"
                  :inputBorder="false"
                  :clearable="true"
                  :disabled="false"
                  :styles="{ disableColor: '#F3F5F9' }"
                  type="digit"
                  v-model="maintenanceInfo.delayDuration"
                  placeholder=""
                />
              </uni-forms-item>
            </view>
            <!-- 自然日 保养规则-自然日期(0启用 1停用)-->
            <view v-if="maintenanceInfo.naturalDateRule == 0">
              <!-- 上次保养自然日期 -->
              <uni-forms-item
                class="form-item"
                :label="$t('maintenanceWorkOrder.lastMaintenanceNaturalDate')"
                name="lastNaturalDate"
                :required="false"
              >
                <uni-datetime-picker
                  type="date"
                  :border="false"
                  :placeholder="' '"
                  :clear-icon="false"
                  :disabled="true"
                  :style="{
                    color: maintenanceInfo.lastNaturalDate ? '#999' : '#999',
                    'font-size': maintenanceInfo.lastNaturalDate
                      ? '14px !important'
                      : 'inherit !important',
                  }"
                  v-model="maintenanceInfo.lastNaturalDate"
                >
                </uni-datetime-picker>
              </uni-forms-item>
              <!-- 推迟自然日期(D) -->
              <uni-forms-item
                class="form-item"
                :label="$t('maintenanceWorkOrder.delayedNaturalDate')"
                name="delayNaturalDate"
                :required="false"
              >
                <uni-easyinput
                  style="text-align: right"
                  :inputBorder="false"
                  :clearable="true"
                  :disabled="false"
                  :styles="{ disableColor: '#F3F5F9' }"
                  type="digit"
                  v-model="maintenanceInfo.delayNaturalDate"
                  placeholder=""
                />
              </uni-forms-item>
            </view>
            <!-- 推迟原因 -->
            <uni-forms-item
              class="form-item"
              :label="$t('maintenanceWorkOrder.delayReason')"
              name="delayReason"
              :required="false"
            >
              <uni-easyinput
                type="textarea"
                :autoHeight="true"
                :inputBorder="false"
                :clearable="true"
                :disabled="false"
                style="text-align: right"
                :styles="{ disableColor: '#F3F5F9' }"
                v-model="maintenanceInfo.delayReason"
                placeholder=""
              />
            </uni-forms-item>
          </uni-section>
          <!-- 运行里程规则配置 里程(0启用 1停用)-->
          <uni-section
            :title="$t('maintenanceWorkOrder.runningMileageRuleConfig')"
            type="line"
            v-if="maintenanceInfo.mileageRule == 0"
          >
            <!-- 运行里程周期(KM) -->
            <uni-forms-item
              class="form-item"
              :label="$t('maintenanceWorkOrder.runningMileageCycle')"
              name="kilometerCycle"
              :required="true"
            >
              <uni-easyinput
                style="text-align: right"
                :inputBorder="false"
                :clearable="false"
                :disabled="true"
                :styles="{ disableColor: '#F3F5F9' }"
                type="digit"
                v-model="maintenanceInfo.nextRunningKilometers"
                placeholder=""
              />
            </uni-forms-item>
            <!-- 运行里程周期-提前量(KM） -->
            <uni-forms-item
              class="form-item"
              :label="$t('maintenanceWorkOrder.runningMileageCycleLead')"
              name="runningMileageCycleAdvance"
              :required="true"
            >
              <uni-easyinput
                style="text-align: right"
                :inputBorder="false"
                :clearable="false"
                :disabled="true"
                :styles="{ disableColor: '#F3F5F9' }"
                type="digit"
                v-model="maintenanceInfo.kiloCycleLead"
                placeholder=""
              />
            </uni-forms-item>
          </uni-section>
          <!-- 运行时间规则配置 -->
          <uni-section
            :title="$t('maintenanceWorkOrder.runningTimeRuleConfig')"
            type="line"
            v-if="maintenanceInfo.runningTimeRule == 0"
          >
            <!-- 运行时间周期(H) -->
            <uni-forms-item
              class="form-item"
              :label="$t('maintenanceWorkOrder.runningTimeCycle')"
              name="timePeriod"
              :required="true"
            >
              <uni-easyinput
                style="text-align: right"
                :inputBorder="false"
                :clearable="false"
                :disabled="true"
                :styles="{ disableColor: '#F3F5F9' }"
                type="digit"
                v-model="maintenanceInfo.nextRunningTime"
                placeholder=""
              />
            </uni-forms-item>
            <!-- 运行时间周期-提前量(H） -->
            <uni-forms-item
              class="form-item"
              :label="$t('maintenanceWorkOrder.runningTimeCycleLead')"
              name="timePeriodLead"
              :required="true"
            >
              <uni-easyinput
                style="text-align: right"
                :inputBorder="false"
                :clearable="false"
                :disabled="true"
                :styles="{ disableColor: '#F3F5F9' }"
                type="digit"
                v-model="maintenanceInfo.timePeriodLead"
                placeholder=""
              />
            </uni-forms-item>
          </uni-section>
          <!-- 自然日规则配置 -->
          <uni-section
            :title="$t('maintenanceWorkOrder.naturalDateRuleConfig')"
            type="line"
            v-if="maintenanceInfo.naturalDateRule == 0"
          >
            <!-- 自然日周期(D) -->
            <uni-forms-item
              class="form-item"
              :label="$t('maintenanceWorkOrder.naturalDateCycle')"
              name="naturalDatePeriod"
              :required="true"
            >
              <uni-easyinput
                style="text-align: right"
                :inputBorder="false"
                :clearable="false"
                :disabled="true"
                :styles="{ disableColor: '#F3F5F9' }"
                type="digit"
                v-model="maintenanceInfo.nextNaturalDate"
                placeholder=""
              />
            </uni-forms-item>
            <!-- 自然日周期-提前量(D） -->
            <uni-forms-item
              class="form-item"
              :label="$t('maintenanceWorkOrder.naturalDateCycleLead')"
              name="naturalDatePeriodLead"
              :required="true"
            >
              <uni-easyinput
                style="text-align: right"
                :inputBorder="false"
                :clearable="false"
                :disabled="true"
                :styles="{ disableColor: '#F3F5F9' }"
                type="digit"
                v-model="maintenanceInfo.naturalDatePeriodLead"
                placeholder=""
              />
            </uni-forms-item>
          </uni-section>
        </uni-forms>
      </scroll-view>
      <button
        class="submit-btn"
        type="primary"
        @click="onConfirm(delayFormRef)"
      >
        {{ $t("operation.save") }}
      </button>
    </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";
import { getMaterialListData } from "@/api/material";
import { devicePage } from "@/api/device";

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

// 接收父组件传递的参数
const props = defineProps({
  maintenance: {
    type: Object,
    default: () => ({}),
  },
});

const oncancel = () => {
  close();
};
const onConfirm = async (formEl) => {
  if (!formEl) return;
  await formEl
    .validate()
    .then((res) => {
      console.log("success", res);
      emit("delay-set", maintenanceInfo.value);
      oncancel();
    })
    .catch((err) => {
      console.log("err", err);
    });
};

onMounted(() => {});

const delayPopRef = ref(null);
const maintenanceInfo = ref({});

// 打开弹窗
const open = (info) => {
  console.log("open info-", info);
  maintenanceInfo.value = info;
  delayPopRef.value.open();
};

// 关闭弹窗
const close = () => {
  delayPopRef.value.close();
};
const delayFormRef = ref(null);
const baseRules = ref({
  delayReason: {
    rules: [
      {
        required: false,
        errorMessage: `${t("operation.PleaseFillIn")}${t(
          "maintenanceWorkOrder.delayReason"
        )}`,
      },
    ],
  },
});

// 动态计算校验规则
const delayRules = computed(() => {
  const rules = JSON.parse(JSON.stringify(baseRules.value));

  // 根据填写内容调整规则
  if (
    maintenanceInfo.value.delayKilometers > 0 ||
    maintenanceInfo.value.delayDuration > 0 ||
    maintenanceInfo.value.delayNaturalDate > 0
  ) {
    // 如果填写了推迟公里数、推迟时长或推迟自然日期，则推迟原因必填
    rules.delayReason.rules[0].required = true;
  } else {
    rules.delayReason.rules[0].required = false;
  }

  return rules;
});

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

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

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

.popup-container {
  width: 100%;
  height: 450px;
  box-sizing: border-box;
  background-color: #fff;
  position: relative;
}

.pop-title {
  width: 100%;
  font-size: 16px;
  color: #333333;
  line-height: 22px;
  margin-bottom: 20px;

  .title {
    // min-width: 49.999999992%;
    width: max-content;
    max-width: 62.49999999%;
    font-weight: 700;
  }
}

.pop-close {
  position: absolute;
  right: -5px;
  top: -10px;
}

.delay-sections {
  position: relative;
  height: calc(100% - 80px);
}

:deep(.uni-section) {
  background: #f3f5f9;
  // border: 1px solid #999;
  margin-bottom: 10px;
}

:deep(.uni-section-content) {
  background: #f3f5f9;
  padding: 0 10px 10px;
}
:deep(.uni-section-header__content) {
  font-weight: 600;
}
:deep(.uni-section-header__decoration) {
  // position: absolute;
  // left: 0;
  margin-right: 10px !important;
  margin-left: -10px;
}
:deep(uni-text) {
  font-size: 14px;
}

:deep(.uni-date-x) {
  background: #f3f5f9;
}

.pop-btn {
  margin-top: 20px;
  width: 120px;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
}
</style>