pms-app/pages/ruihen/components/form.vue

<script setup>
  import { ref, computed, watch, nextTick, reactive } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import { getRuiHenReportDetail } from '@/api/ruihen';
  import { useDataDictStore } from '@/store/modules/dataDict';

  const props = defineProps({
    type: {
      type: String,
      default: 'edit',
    },
  });

  const FORM_KEYS = [
    'id',
    'deptId',
    'projectId',
    'taskId',
    'deptName',
    'contractName',
    'taskName',
    'dailyGasInjection',
    'dailyWaterInjection',
    'dailyInjectGasTime',
    'dailyInjectWaterTime',
    'nonProductionTime',
    'nptReason',
    'productionStatus',
    'remark',
    'relocationDays',
    'capacity',
    'createTime',
    'opinion',
    'status',
    'auditStatus',
  ];

  const formType = ref('edit');

  const initFormData = () => ({
    dailyGasInjection: 0,
    dailyWaterInjection: 0,
    dailyInjectGasTime: 0,
    dailyInjectWaterTime: 0,
    nonProductionTime: 0,
    relocationDays: 0,
    capacity: 0,
  });

  const form = ref(initFormData());

  async function loadDetail(id) {
    try {
      const { data } = await getRuiHenReportDetail({ id });

      FORM_KEYS.forEach(key => {
        form.value[key] = data[key] ?? form.value[key];
      });
      form.value.id = id;

      if (props.type.includes('approval') && data.auditStatus !== 10) {
        formType.value = 'readonly';
      }

      if (props.type.includes('edit') && data.status !== 0) {
        formType.value = 'readonly';
      }

      if (props.type.includes('detail')) {
        formType.value = 'readonly';
      }

      if (!form.value.capacity) {
        uni.showToast({ title: '请维护增压机产能' });
      }
    } finally {
    }
  }

  const dictStore = useDataDictStore();

  const nptReasonOptions = ref([]);

  const loadOptions = () => {
    nptReasonOptions.value = dictStore.getStrDictOptions('nptReason').map(v => ({
      text: v.label,
      value: v.value,
    }));
  };

  onLoad(options => {
    if (dictStore.dataDict.length <= 0) {
      dictStore.loadDataDictList().then(() => {
        loadOptions();
      });
    } else loadOptions();
    loadDetail(options.id);
  });

  const defaultProps = computed(() => ({
    inputBorder: false,
    clearable: false,
    placeholder: '请输入',
    style: {
      'text-align': 'right',
    },
    styles: {
      disableColor: '#fff',
    },
  }));

  const disabled = computed(() => field => {
    if (field === 'edit')
      return formType.value === 'readonly' || props.type.includes('approval') || props.type.includes('detail');
    else return formType.value === 'readonly';
  });

  const transitTime = computed(() => {
    const cap = form.value.capacity;
    const gas = form.value.dailyGasInjection ?? 0;

    if (!cap) return { original: 0, value: '0%' };

    const original = gas / cap;
    return { original, value: (original * 100).toFixed(2) + '%' };
  });

  const formRef = ref(null);

  // 辅助函数：计算总时间
  const sumTimes = () => {
    // 注意：uni-app input 出来可能是字符串，需转数字
    const gas = Number(form.value.dailyInjectGasTime) || 0;
    const water = Number(form.value.dailyInjectWaterTime) || 0;
    const npt = Number(form.value.nonProductionTime) || 0;

    return parseFloat((gas + water + npt).toFixed(2));
  };

  // 校验函数：总时间必须为 24
  const validateTotalTime = (rule, value, data, callback) => {
    console.log('value :>> ', value);
    const total = sumTimes();
    if (total !== 24) {
      callback(`当前合计 ${total} 小时，三项之和须为 24`);
    }
    return true; // uni-forms 如果没调用 callback error，需返回 true 代表通过
  };

  // // 校验函数：非生产时间原因
  // const validateNptReason = (rule, value, data, callback) => {
  //   const npt = Number(form.value.nonProductionTime) || 0;
  //   console.log('npt :>> ', npt);
  //   console.log('value :>> ', value);
  //   if (npt > 0 && !value) {
  //     callback('非生产时间大于 0 时，必须选择原因');
  //   }
  //   return true;
  // };

  // 复用的时间规则
  const timeRuleItem = {
    rules: [
      { required: true, errorMessage: '请输入时间' },
      { validateFunction: validateTotalTime }, // 关联自定义校验
    ],
  };

  // uni-forms 规则定义
  const rules = reactive({
    dailyGasInjection: {
      rules: [{ required: true, errorMessage: '请输入当日注气量' }],
    },
    dailyWaterInjection: {
      rules: [{ required: true, errorMessage: '请输入当日注水量' }],
    },
    productionStatus: {
      rules: [{ required: true, errorMessage: '请输入生产动态' }],
    },

    // 时间字段应用复用规则
    dailyInjectGasTime: timeRuleItem,
    dailyInjectWaterTime: timeRuleItem,
    nonProductionTime: timeRuleItem,

    // nptReason: {
    //   rules: [{ validateFunction: validateNptReason }],
    // },
  });

  watch(
    [() => form.value.dailyInjectGasTime, () => form.value.dailyInjectWaterTime, () => form.value.nonProductionTime],
    () => {
      nextTick(() => {
        formRef.value?.validateField(['nptReason']).catch(() => {});
        if (sumTimes() === 24) {
          formRef.value?.clearValidate(['dailyInjectGasTime', 'dailyInjectWaterTime', 'nonProductionTime']);
        }
      });
    }
  );

  defineExpose({ formRef, form, loadDetail });
</script>

<template>
  <view class="content">
    <view class="tip">
      <view class="item">
        <view class="left">
          <span>运行时效：</span>
          当日注气量 / 产能
        </view>
        <span class="right red"> >120% 红色预警 </span>
      </view>
      <view class="item">
        <view class="left">
          <span>时间平衡：</span>
          注气 + 注水 + 非生产 = 24H
        </view>
        <span class="right orange"> ≠24H 橙色预警 </span>
      </view>
    </view>
    <view v-if="!type.includes('approval') && form.opinion" class="opinion">
      <span class="left">审批意见：</span>
      <span class="right"> {{ form.opinion }} </span>
    </view>
    <uni-forms
      ref="formRef"
      labelWidth="auto"
      :model="form"
      :rules="rules"
      validateTrigger="blur"
      err-show-type="toast">
      <uni-forms-item label="施工队伍" name="deptName">
        <span class="readOnly">{{ form.deptName }}</span>
      </uni-forms-item>
      <uni-forms-item label="项目" name="contractName">
        <span class="readOnly">{{ form.contractName }}</span>
      </uni-forms-item>
      <uni-forms-item label="任务" name="taskName">
        <span class="readOnly">{{ form.taskName }}</span>
      </uni-forms-item>
      <uni-forms-item label="搬迁安装天数(D)" name="relocationDays">
        <span class="readOnly">{{ form.relocationDays }}</span>
      </uni-forms-item>
      <uni-forms-item label="运行时效" name="transitTime">
        <span class="readOnly" :class="{ 'red-text': transitTime.original > 1.2 }">{{ transitTime.value }}</span>
      </uni-forms-item>
      <uni-forms-item label="当日注气量(方)" name="dailyGasInjection" required>
        <uni-easyinput
          type="number"
          v-bind="defaultProps"
          :disabled="disabled('edit')"
          v-model="form.dailyGasInjection" />
      </uni-forms-item>
      <uni-forms-item label="当日注水量(方)" name="dailyWaterInjection" required>
        <uni-easyinput
          type="number"
          v-bind="defaultProps"
          :disabled="disabled('edit')"
          v-model="form.dailyWaterInjection" />
      </uni-forms-item>
      <uni-forms-item label="当日注气时间(H)" name="dailyInjectGasTime" required>
        <uni-easyinput
          type="number"
          v-bind="defaultProps"
          :class="{ 'orange-text': sumTimes() !== 24 }"
          :disabled="disabled('edit')"
          v-model="form.dailyInjectGasTime" />
      </uni-forms-item>
      <uni-forms-item label="当日注水时间(H)" name="dailyInjectWaterTime" required>
        <uni-easyinput
          type="number"
          v-bind="defaultProps"
          :class="{ 'orange-text': sumTimes() !== 24 }"
          :disabled="disabled('edit')"
          v-model="form.dailyInjectWaterTime" />
      </uni-forms-item>
      <uni-forms-item label="非生产时间(H)" name="nonProductionTime" required>
        <uni-easyinput
          type="number"
          v-bind="defaultProps"
          :class="{ 'orange-text': sumTimes() !== 24 }"
          :disabled="disabled('edit')"
          v-model="form.nonProductionTime" />
      </uni-forms-item>
      <uni-forms-item label="非生产时间原因" name="nptReason">
        <uni-data-select
          :clear="true"
          align="right"
          placeholder="请选择"
          :localdata="nptReasonOptions"
          placement="top"
          :disabled="disabled('edit')"
          v-model="form.nptReason" />
      </uni-forms-item>
      <uni-forms-item label="生产动态" name="productionStatus" required>
        <uni-easyinput
          type="textarea"
          autoHeight
          v-bind="defaultProps"
          v-model="form.productionStatus"
          :disabled="disabled('edit')"
          :maxlength="1000" />
      </uni-forms-item>
      <uni-forms-item label="备注" name="remark">
        <uni-easyinput
          type="textarea"
          autoHeight
          v-bind="defaultProps"
          :disabled="disabled('edit')"
          v-model="form.remark"
          :maxlength="1000" />
      </uni-forms-item>
      <uni-forms-item v-if="type.includes('approval')" label="审批意见" name="opinion">
        <uni-easyinput
          type="textarea"
          autoHeight
          v-bind="defaultProps"
          :disabled="disabled('approval')"
          v-model="form.opinion"
          :maxlength="1000" />
      </uni-forms-item>
    </uni-forms>
  </view>
</template>

<style lang="scss" scoped>
  .content {
    background-color: white;
    padding: 16px 16px;
    border-radius: 8px;
    box-sizing: border-box;
  }

  .uni-forms {
    margin-top: 10px;
    height: 100%;

    .uni-form {
      height: 100%;
    }

    .uni-forms-item {
      display: flex;
      align-items: center;
      flex: 1;
      margin-bottom: 6px;
      border-bottom: 1px dashed #cacccf;
    }

    :deep(.uni-forms-item__content) {
      text-align: right;
      .readOnly {
        padding-right: 10px;
      }
    }

    :deep(.uni-forms-item__label) {
      height: 44px;
      font-weight: 500;
      font-size: 14px;
      color: #333333 !important;
      width: max-content !important;
    }

    :deep(.uni-select) {
      border: none;
      text-align: right;
      padding-right: 0;
      .uniui-bottom:before {
        content: '\e6b5' !important;
        font-size: 16px !important;
      }
    }

    :deep(.uni-easyinput__content-textarea) {
      min-height: inherit;
      margin: 10px;
    }

    :deep(.is-disabled) {
      color: #333333 !important;
    }

    :deep(.red-text > .is-disabled) {
      color: rgb(220 38 38 / 0.8) !important;
    }

    :deep(.orange-text > .is-disabled) {
      color: rgb(234 88 12 / 0.8) !important;
    }

    :deep(.uni-select--disabled) {
      background-color: #fff;
    }
  }

  .red-text {
    color: rgb(220 38 38 / 0.8) !important;
  }

  .orange-text {
    color: rgb(234 88 12 / 0.8) !important;
  }

  .red {
    border: 1px solid rgb(254 226 226);
    color: rgb(220 38 38 / 0.8);
    background-color: rgb(254 226 226);
  }

  .orange {
    border: 1px solid rgb(254 215 170);
    color: rgb(234 88 12 / 0.8);
    background-color: rgb(254 215 170);
  }

  .tip {
    border-radius: 8px;
    border: 1px solid #e5e5e5;
    background-color: rgba(239, 246, 255, 0.8);
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;

    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;

      .left {
        color: rgb(75 85 99);

        span {
          color: rgb(31 41 55);
          font-weight: 600;
        }
      }

      .right {
        display: inline-flex;
        align-items: center;
        border-radius: 4px;
        padding: 2px 4px;
        font-weight: 500;
      }
    }
  }

  .opinion {
    border-radius: 8px;
    border: 1px solid rgb(254 240 138);
    background-color: rgb(254 252 232);
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    margin-top: 10px;

    .left {
      font-weight: 600;
      color: rgb(133 77 14);
    }

    .right {
      font-weight: 500;
      color: rgb(75 85 99);
    }
  }
</style>