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

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

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

  const FORM_KEYS = [
    'id',
    'deptId',
    'projectId',
    'taskId',
    'deptName',
    'contractName',
    'taskName',
    'repairStatus',
    'technique',
    'wellCategory',
    'designWellDepth',
    'casingPipeSize',
    'wellControlLevel',
    'currentOperation',
    'nextPlan',
    'transitTime',
    'ratedProductionTime',
    'productionTime',
    'nonProductionTime',
    'ryNptReason',
    'productionStatus',
    'totalStaffNum',
    'onDutyStaffNum',
    'leaveStaffNum',
    'dailyFuel',
    'remark',
    'createTime',
    'opinion',
    'status',
    'auditStatus',
  ];

  const formType = ref('edit');

  const initFormData = () => ({});

  const form = ref(initFormData());

  async function loadDetail(id) {
    try {
      const { data } = await getRuiYingReportDetail({ 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';
      }
    } finally {
    }
  }

  const dictStore = useDataDictStore();

  const nptReasonOptions = ref([]);
  const rigStatusOptions = ref([]);
  const techniqueOptions = ref([]);

  const loadOptions = () => {
    nptReasonOptions.value = dictStore.getStrDictOptions('ryNptReason').map(v => ({
      text: v.label,
      value: v.value,
    }));
    rigStatusOptions.value = dictStore.getStrDictOptions('repairStatus').map(v => ({
      text: v.label,
      value: v.value,
    }));
    techniqueOptions.value = dictStore.getStrDictOptions('rq_iot_project_technology_ry').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.productionTime ?? 0;
    const gas = form.value.ratedProductionTime ?? 0;

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

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

  const formRef = ref(null);

  const onDutyStaffNum = computed(() => {
    return (form.value.totalStaffNum ?? 0) - (form.value.leaveStaffNum ?? 0);
  });

  // 辅助函数：计算总时间
  const sumTimes = () => {
    const { productionTime = 0, nonProductionTime = 0 } = form.value;
    return Number(productionTime) + Number(nonProductionTime);
  };

  // 校验函数：总时间必须为 24
  const validateTotalTime = (rule, value, data, callback) => {
    const total = sumTimes();
    if (total !== Number(form.value.ratedProductionTime)) {
      callback(`生产时间和非生产时间之和必须等于额定生产时间`);
    } else {
      callback();
    }
  };

  // // 校验函数：非生产时间原因
  // 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({
    repairStatus: {
      rules: [{ required: true, errorMessage: '请输入施工状态' }],
    },
    productionStatus: {
      rules: [{ required: true, errorMessage: '请输入生产动态' }],
    },

    // 时间字段应用复用规则
    // productionTime: timeRuleItem,
    // nonProductionTime: timeRuleItem,
    // ratedProductionTime: timeRuleItem,

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

  watch(
    [() => form.value.dailyInjectGasTime, () => form.value.dailyInjectWaterTime, () => form.value.nonProductionTime],
    () => {
      nextTick(() => {
        formRef.value?.validateField(['ryNptReason']).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"> >100% 红色预警 </span>
      </view>
      <view class="item">
        <view class="left">
          <span>时间平衡：</span>
          生产 + 非生产 = 额定生产
        </view>
        <span class="right orange"> ≠额定生产 橙色预警 </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="施工状态" name="repairStatus" required>
        <uni-data-select
          :clear="true"
          align="right"
          placeholder="请选择"
          :localdata="rigStatusOptions"
          placement="top"
          :disabled="disabled('edit')"
          v-model="form.repairStatus" />
      </uni-forms-item>
      <uni-forms-item label="施工工艺" name="technique">
        <uni-data-select
          :clear="true"
          align="right"
          placeholder="请选择"
          :localdata="techniqueOptions"
          placement="top"
          :disabled="disabled('edit')"
          v-model="form.technique" />
      </uni-forms-item>
      <uni-forms-item label="井别" name="wellCategory">
        <uni-easyinput v-bind="defaultProps" v-model="form.wellCategory" :disabled="disabled('edit')" />
      </uni-forms-item>
      <uni-forms-item label="设计井深(m)" name="designWellDepth">
        <uni-easyinput v-bind="defaultProps" v-model="form.designWellDepth" :disabled="disabled('edit')" />
      </uni-forms-item>
      <uni-forms-item label="井控级别" name="wellControlLevel">
        <uni-easyinput v-bind="defaultProps" v-model="form.wellControlLevel" :disabled="disabled('edit')" />
      </uni-forms-item>
      <uni-forms-item label="套生段产管尺寸(mm)" name="casingPipeSize">
        <uni-easyinput v-bind="defaultProps" v-model="form.casingPipeSize" :disabled="disabled('edit')" />
      </uni-forms-item>
      <uni-forms-item label="当日油耗(L)" name="dailyFuel">
        <uni-easyinput type="number" v-bind="defaultProps" :disabled="disabled('edit')" v-model="form.dailyFuel" />
      </uni-forms-item>
      <uni-forms-item label="目前工序" name="currentOperation">
        <uni-easyinput
          type="textarea"
          autoHeight
          v-bind="defaultProps"
          v-model="form.currentOperation"
          :disabled="disabled('edit')"
          :maxlength="1000" />
      </uni-forms-item>
      <uni-forms-item label="下步工序" name="nextPlan">
        <uni-easyinput
          type="textarea"
          autoHeight
          v-bind="defaultProps"
          v-model="form.nextPlan"
          :disabled="disabled('edit')"
          :maxlength="1000" />
      </uni-forms-item>
      <uni-forms-item label="运行时效" name="transitTime">
        <span class="readOnly" :class="{ 'red-text': transitTime.original > 1.0 }">{{ transitTime.value }}</span>
      </uni-forms-item>
      <uni-forms-item label="额定生产时间(H)" name="ratedProductionTime" required>
        <uni-easyinput
          type="number"
          v-bind="defaultProps"
          :class="{ 'orange-text': sumTimes() !== Number(form.ratedProductionTime) }"
          :disabled="disabled('edit')"
          v-model="form.ratedProductionTime" />
      </uni-forms-item>
      <uni-forms-item label="生产时间(H)" name="productionTime" required>
        <uni-easyinput
          type="number"
          v-bind="defaultProps"
          :class="{ 'orange-text': sumTimes() !== Number(form.ratedProductionTime) }"
          :disabled="disabled('edit')"
          v-model="form.productionTime" />
      </uni-forms-item>
      <uni-forms-item label="非生产时间(H)" name="nonProductionTime" required>
        <uni-easyinput
          type="number"
          v-bind="defaultProps"
          :class="{ 'orange-text': sumTimes() !== Number(form.ratedProductionTime) }"
          :disabled="disabled('edit')"
          v-model="form.nonProductionTime" />
      </uni-forms-item>
      <uni-forms-item label="非生产时间原因" name="ryNptReason">
        <uni-data-select
          :clear="true"
          align="right"
          placeholder="请选择"
          :localdata="nptReasonOptions"
          placement="top"
          :disabled="disabled('edit')"
          v-model="form.ryNptReason" />
      </uni-forms-item>
      <uni-forms-item label="全员数量" name="totalStaffNum">
        <uni-easyinput type="number" v-bind="defaultProps" :disabled="disabled('edit')" v-model="form.totalStaffNum" />
      </uni-forms-item>
      <uni-forms-item label="在岗人数" name="onDutyStaffNum">
        <uni-easyinput type="number" v-bind="defaultProps" disabled v-model="onDutyStaffNum" />
      </uni-forms-item>
      <uni-forms-item label="休假人员数量" name="leaveStaffNum">
        <uni-easyinput type="number" v-bind="defaultProps" :disabled="disabled('edit')" v-model="form.leaveStaffNum" />
      </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>